238649cb by Michael Richards

Update the README to include a brief overview of iteration binding.

1 parent a936931b
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
......