Fatal编程技术网
  • data-binding/
  • Data binding knockout$绑定到HTML元素的数据

Data binding knockout$绑定到HTML元素的数据

data-binding knockout.js

Data binding knockout$绑定到HTML元素的数据,data-binding,knockout.js,Data Binding,Knockout.js,因此，假设我有一个名为people的viewmodel，它由一个person-object文本数组组成，如 [{ name = John, age = 30, sex = male }, { name = Mike, age = 29, sex = male }, { name = Anna, age = 28, sex = female }] 假设我想把每个人都绑定到一个，比如 <ul data-bind="foreach: people"> <li data-

因此，假设我有一个名为people的viewmodel，它由一个person-object文本数组组成，如

[{ name = John, age = 30, sex = male },
 { name = Mike, age = 29, sex = male },
 { name = Anna, age = 28, sex = female }]
假设我想把每个人都绑定到一个
  • ，比如
    

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

    

      

    • 

    

    
但是，是否有可能通过
    数据绑定=“with:$data”
    将整个person对象绑定到
  • ，因此，例如，当我单击
  • 时，其他一些
    显示其余信息，在本例中是年龄和性别
    

    这就像我想让
    • 保存person对象数据，这样我就可以在其他地方使用它。
    通常，您希望创建一个在视图模型级别可以观察到的
    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>

    

    Quick fiddle:
    通常，您希望在视图模型级别创建一个像
    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>

    
快速小提琴：