Question

如何使用foreach binding和点击事件将数据填充或加载到表格或列表中？我需要传递click事件中的值并使用foreach进行绑定。

目前，在页面加载时，我可以使用带有Computed Observable的foreach来填充表或列表。例如。 ul。

示例：的

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

然后：

    self.people = ko.computed(function () {
        return ko.utils.arrayFilter(observableArrayDataSource(), function (data) {
            return data.personId === personIdFromClick;
        });

      });

我需要使用如下所示的点击：

    self.getPersonIdOnClick = function(person){
       // pass person.personId to the function above. 
      //  Each time a person name is clicked 
      // The redo foreach binding
    };

更新： JSFiddle此处提供工作解决方案，如下所示：

Answer 1

您只需要在视图模型中有一个可观察的，用于存储当前选定的personId。您没有将参数显式“传递”到计算中。通过在计算的内部引用self.selectedPersonId，创建依赖关系。只要计算机的任何依赖项发生变化，计算机就会自动重新评估。

this.selectedPersonId = ko.observable(null);
this.getPersonIdOnClick = function (person) {
    self.selectedPersonId(person.personId);
};

this.people = ko.computed(function () {
    return observableArrayDataSource().filter(function (person) {
        return person.personId === self.selectedPersonId();
    });
});

如何使用单击事件从Computed Observables访问数据？

1 个答案: