在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來解決問題。