淘汰 $data 绑定到 HTML 元素答案

【问题标题】：knockout $data binding to an HTML element淘汰 $data 绑定到 HTML 元素
【发布时间】：2014-01-15 05:47:37
【问题描述】：

所以，假设我有一个名为 people 的视图模型，它由一个 person 对象字面量数组 组成，例如

[{ 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> 所以，例如，当我点击@ 987654326@ 其他一些<div> 显示其余信息，在本例中是年龄和性别？

就像我希望 <li> 保存人员对象数据，所以我可以在其他地方使用它。

【问题讨论】：

标签： data-binding knockout.js

【解决方案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 实际上是一个 observable，它会用数据作为它的值来填充它。

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

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

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

【讨论】：