Update the README to include a brief overview of iteration binding.
Showing
1 changed file
with
28 additions
and
2 deletions
... | @@ -104,6 +104,7 @@ Available bindings out-of-the-box: | ... | @@ -104,6 +104,7 @@ Available bindings out-of-the-box: |
104 | - data-unchecked | 104 | - data-unchecked |
105 | - data-*[attribute]* | 105 | - data-*[attribute]* |
106 | - data-on-*[event]* | 106 | - data-on-*[event]* |
107 | - data-each-*[item]* | ||
107 | 108 | ||
108 | #### Formatters | 109 | #### Formatters |
109 | 110 | ||
... | @@ -143,9 +144,34 @@ Computed properties are functions that get re-evaluated when one or more depende | ... | @@ -143,9 +144,34 @@ Computed properties are functions that get re-evaluated when one or more depende |
143 | 144 | ||
144 | #### Iteration Binding | 145 | #### Iteration Binding |
145 | 146 | ||
146 | Even though a binding routine for `each-item` will likely be included in Rivets.js, you can use the `data-html` binding along with a set of formatters in the interim to do sorting and iterative rendering of collections (amongst other cool things). | 147 | Use the `data-each-[item]` binding to have Rivets.js automatically loop over items in an array and append bound instances of that element. Within that element you can bind to the iterated item as well as any contexts that are available in the parent view. |
147 | 148 | ||
148 | <ul data-html="model.tags | sort | tagList"></ul> | 149 | ``` |
150 | <ul> | ||
151 | <li data-each-todo="list.todos"> | ||
152 | <input type="checkbox" data-checked="todo.done"> | ||
153 | <span data-text="todo.summary"></span> | ||
154 | </li> | ||
155 | <ul> | ||
156 | ``` | ||
157 | |||
158 | If the array you're binding to contains non-model objects (they don't conform to your adapter), you can still iterate over them, just make sure to use the adapter bypass syntax — in doing so, the iteration binding will still update when the array changes, however the individual items will not since they'd be bypassing the `adapter.subscribe`. | ||
159 | |||
160 | ``` | ||
161 | <ul> | ||
162 | <li data-each-link="item.links"> | ||
163 | <a data-href="link:url" data-text="link:title"></span> | ||
164 | </li> | ||
165 | </ul> | ||
166 | ``` | ||
167 | |||
168 | Also note that you may bind to the iterated item directly on the parent element. | ||
169 | |||
170 | ``` | ||
171 | <ul> | ||
172 | <li data-each-tag="item.tags" data-text="tag:name"></li> | ||
173 | </ul> | ||
174 | ``` | ||
149 | 175 | ||
150 | ## Building and Testing | 176 | ## Building and Testing |
151 | 177 | ... | ... |
-
Please register or sign in to post a comment