knockoutjs四 foreach的绑定

knockoutjs四 foreach的绑定

今天要讲的是foreach绑定

 <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中的元素就会循环出现，
再看看下面的例子：

        <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中一样取一个别名给当前对象

    <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和我交流