在Knockout.JS中按值绑定

Question

我是Knockout.JS新手，我有这种情况：

我的ViewModel中有一个对象数组，如下所示：

var viewModel = {
    people : ko.observableArray([
        {id = 1, name = 'John'},
        {id = 2, name = 'Alice'},
        {id = 3, name = 'Tommy'}
    ])
}

我想做的是“按id”绑定到people数组的元素，而不是用foreach或类似的方法枚举它。 我想做类似的事情：

<span data-bind="text: people()[id=2].name"></span>

或类似的东西。 换句话说，我想得到一个我知道“键”（在这种情况下为id ）的特定项。 这可能吗？

Answer 1

我不确定为什么要在数据绑定中获取特定人员，但是您需要一些逻辑来将您的ID用作参数，然后返回要显示的人员。 我举了一个绑定到特定人并列出完整数组的示例。

JSFiddle可运行示例

function peopleModel(){
 var self = this;

 self.people =  ko.observableArray([
    {id: 1, name: 'John'},
    {id: 2, name: 'Alice'},
    {id: 3, name: 'Tommy'}
 ]);

 self.personById = function(id){
    return self.people().find(function(p){
    return p.id === id;
  });
 };
};

ko.applyBindings(new peopleModel());

<span data-bind="text: personById(2).name"></span>

<table>
 <tbody data-bind="foreach: people">
   <tr>
     <td data-bind="text: id"></td>
     <td data-bind="text: name"></td>
   </tr>
 </tbody>
</table>

Answer 2

是的，有可能。 例如，您可以创建computed以使数组按id索引：

viewModel.people.byId = ko.computed(function(){
  return viewModel.people().reduce(function(acc, obj){
    acc[obj.id] = obj;
    return acc;
  }, {});
});

..并将标记中的特定人称为：

<span data-bind="text: people.byId()['person_id'].name"></span>

computed可以附加到viewModel或可观察数组本身（我更喜欢第二种选择）。

小提琴

Answer 3

您提供的模型不是按键枚举的，因此您必须遍历所有项以按键查找。

如果您不想一直这样做，则可以采用以下两种类似方法之一来迭代数组更改：

• 使用ko.computed
• 使用observableArray.subscribe

计算应该是这样的：

viewModel.peope_by_id = ko.computed(function () {
    var result = {};
    ko.utils.arrayFilter(viewModel.people, function(item){
        result[item.id] = item;
    });
    return result;
});

和subscription非常相似，除了它正在更新non-ko模型的广告位：

viewModel.peope.subscribe(function () {
    viewModel.peope_by_id = {};
    ko.utils.arrayFilter(viewModel.people, function(item){
        viewModel.peope_by_id[item.id] = item;
    });
});

这不是什么大问题，从性能角度来看，除非您在数据中拥有很多人，否则您可能不会注意到它。 如果您根本不想迭代，则必须更改数据模型或用例。 通过使用$index而不是id来解决问题。