你的位置:首页 > 软件开发 > Java > KnockOut 绑定之foreach绑定(mvc+knockout)

KnockOut 绑定之foreach绑定(mvc+knockout)

发布时间:2015-03-31 00:00:19
什么时候使用foreach绑定foreach绑定对于数组中的每一个元素复制一节标记语言,也就是html,并且将这节标记语言和数组里面的每一个元素绑定。当我们呈现一组list数据,或者一个表格的时候,十分有用。如果你绑定的数组是一个"监控数组" ,obser ...

KnockOut 绑定之foreach绑定(mvc+knockout)

什么时候使用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

mvc
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。