从 knockoutjs 中的数组项访问父项

Question

    let vm = {
        title: '',
        value: {},
        items: [{name, text, onClick: ()=> {}],
        selectedItem: ko.observable()
     }

整个 vm 绑定到一个 html 子组件。 当items数组中的一个item被点击时，我想通知父组件 我想从 onClick 方法内部访问 selectedItem 。 整个想法是我希望孩子在点击项目时通知父母

Answer 1

您可以采取两种方法：

1. 在 javascript 中创建视图模型时，将对 selectedItem 可观察对象的引用传递给每个项目
2. 使用敲除的bindingContext 来解析对项目$parent 视图模型的引用。

注意：请记住，任何通过 click 绑定绑定的函数都将使用两个参数调用：(1) 被点击的视图模型，以及 (2) 点击事件。

方法 1

这是第一种方法的示例：

• 在构建所有虚拟机之前定义selectedItem
• 在每个项目的onClick中引用它

let selectedItem = ko.observable();

let vm = {
  items: [
    {
      name: "Item 1",
      onClick: self => selectedItem(self)
    },
    {
      name: "Item 2",
      onClick: self => selectedItem(self)
    }
  ],
  
  selectedItem
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<p data-bind="with: selectedItem">Selection: <span data-bind="text: name"></span></p>

<ul data-bind="foreach: items">
  <li>
    <span data-bind="text: name"></span>
    <button data-bind="click: onClick">Select</button>
  </li>
</ul>

方法2

这是第二种方法的示例：

• 在html视图中，引用$parent.selectedItem
• 点击时，knout 将调用selectedItem 作为传递点击数据的函数

let vm = {
  items: [
    {
      name: "Item 1",
    },
    {
      name: "Item 2",
    }
  ],
  
  selectedItem: ko.observable()
}

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<p data-bind="with: selectedItem">Selection: <span data-bind="text: name"></span></p>

<ul data-bind="foreach: items">
  <li>
    <span data-bind="text: name"></span>
    <button data-bind="click: $parent.selectedItem">Select</button>
  </li>
</ul>