淘汰赛$数据绑定到HTML元素(knockout $data binding to an HTML

因此，假设我有这样的视图模型命名为人们它由人对象文本的数组 ，像

[{ name = John, age = 30, sex = male },
 { name = Mike, age = 29, sex = male },
 { name = Anna, age = 28, sex = female }]

并且假设我想数据绑定每个人的<li>像

<ul data-bind="foreach: people">
    <li data-bind="text: name"></li>
</ul>

但是 ，是有可能的，也许通过data-bind="with: $data" ，整个人对象绑定到<li>因此，举例来说，当我点击<li>一些其他<div>显示，其余的信息，在这个例子中是年龄和性别？

这就像我想要的<li>持有人对象的数据，所以我可以用在别的地方。

Answer 1:

一般情况下，你想创建像selectedPerson在视图模型级别观察到的，那么你可以这样做：

<ul data-bind="foreach: people">
    <li data-bind="click: $parent.selectedPerson">
         <span data-bind="text: name"></span>
         <div data-bind="visible: $parent.selectedPerson() === $data">
              <span data-bind="text: age"></span>
         </div>
    </li>
</ul>

你当然可以使用一个链接/按钮周围的名字，如果你喜欢。 当你点击它， selectedPerson将用作处理程序，并通过当前的数据作为第一个参数。 因为， selectedPerson实际上是一个可观察的，它会随着数据作为其值来填充它。

否则，你当然可以有另一个区域，以显示在您做的详细信息：

<div data-bind="with: selectedPerson">
   ....
</div>

快速小提琴： http://jsfiddle.net/rniemeyer/8dRZ4/

文章来源: knockout $data binding to an HTML element