knockoutjs四 foreach的绑定
今天要讲的是foreach绑定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| <tbody data-bind="foreach:people"> <tr> <td data-bind="text:$index()+1"></td> <td data-bind="text:firstName"></td> <td data-bind="text:lastName"></td> </tr> </tbody> <script> function Model() { var self = this; self.people = ko.observableArray([ {firstName: 'Bert', lastName: 'Bertington'}, {firstName: 'Charles', lastName: 'Charlesforth'}, {firstName: 'Denise', lastName: 'Dentiste'} ]); self.remove = function (data,target) { self.people.remove(this); }; } var model = new Model(); ko.applyBindings(model); </script> ``` foreach 绑定需要绑定一个数组对象,foreach中的元素就会循环出现, 再看看下面的例子:
```html <tr> <td data-bind="text:$index()+1"></td> <td data-bind="text:$data.firstName"></td> <td data-bind="text:$data.lastName"></td> <td><a data-bind="click:$parent.remove " href='#' class="text-warning">删除</a></td> </tr>
|
$index代表的是绑定的数组的元素的当前索引,$data代表的是当前循环到的对象,$parent代表的是当前对象的父对象,当前对象是people,父对象是model所以$parent.remove代表的是
model中的remove方法,这方法有两个参数:data,target。data对应的是当前对象绑定的数据,比如这个绑定中的data如图:
target.currentTarget对应的绑定这个方法的对象,当前的例子中如图:
当然,也可以像jstl中一样取一个别名给当前对象
1 2 3 4 5 6 7 8
| <tbody data-bind="foreach:{data:people , as :'p'}"> <tr> <td data-bind="text:$index()+1"></td> <td data-bind="text:p.firstName"></td> <td data-bind="text:p.lastName"></td> <td><a data-bind="click:$parent.remove " href='#' class="text-warning">删除</a></td> </tr> </tbody>
|
今天的例子就到这里,比较简单,代码托管在https://github.com/lushunming/knockoutJSDemo.git可以直接克隆。希望大家有意见可以留言,有疑问或者错误可以加我的qq1357197829和我交流