什么时候使用foreach绑定foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定。当我们呈现一组list数据,或者一个表格的时候,十分有用。如果你绑定的数组是一个"监控数组" ,obser ...
什么时候使用foreach绑定
foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定。当我们呈现一组list数据,或者一个表格的时候,十分有用。
如果你绑定的数组是一个"监控数组" ,observable array,(和wpf里面的ObservableCollection<T>差不多)。当你添加或移除,或者重新排序数组里面的元素的时候,会动态的更新UI界面。并且此时并不会影响原先的DOM元素。这样比我们直接重新生成一个数组并且绑定元素高效的多。
当然,foreach也支持嵌套绑定,或者和其他工作流绑定例如if 或者with。
Example 1: 迭代绑定一个数组
对数组中的每一个元素生成一行数据的只读表。
@{ Layout = null;}<script src='/images/loading.gif' data-original="~/Scripts/jquery-1.10.2.js"></script><script src='/images/loading.gif' data-original="~/Scripts/knockout-3.2.0.js"></script><table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: people"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody></table><script type="text/javascript"> ko.applyBindings({ people: [ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }, { firstName: 'Denise', lastName: 'Dentiste' } ] });</script>
要点 2: 使用$index, $parent, 和其他的上下文属性
就像我们在例2 中看到的那样。你可一用$index 来表示数组中当前项从零开始的索引。 $index是一个监控属性,当数组的项变更的时候$index也会自动更新。
同样,你也可以用$parent来指向foreach外的数据。如果foreach对应的是viewmodel的直接子元素,那么$parent就是指的viewmodel
<h1 data-bind="text: blogPostTitle"></h1><ul data-bind="foreach: likes"> <li> <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b> </li></ul>
原标题:KnockOut 绑定之foreach绑定(mvc+knockout)
关键词:mvc
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。