Question

所以，假设我有一个名为人的视图模型，它包含一个人物对象文字数组，比如

[{ 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 observable，然后您可以执行以下操作：

<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绑定到HTML元素

1 个答案: