在Knockout.JS中按值绑定

Question

I'm new to Knockout.JS and I have this scenario:

I have an array of objects in my ViewModel, like this:

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

What I'm trying to do is binding to elements of the people array "by id", rather than enumerating it with a foreach or similar. I'd like to do something like:

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

or something similar. In other words I'd like to get a specific item of which I know a "key" ( id in this case). Is this possible?

Answer 1

Im not sure why you would fetch a specific person in the data-bind, but you need some logic to take your ID as a paremeter, and return the person you would like to display. I made an example with binding to a specific person, and listing the full array.

JSFiddle runnable example

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

Yes, it's possible. For example you can create computed to have your array indexed by id:

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

..and refer particular person in the markup as:

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

The computed may be attached either to viewModel or to the observable array itself (I prefer the second option).

Fiddle

Answer 3

The model as you presented doesn't enumerate by key, so you would have to iterate through the items to find by key.

If you don't want to constantly do that, you can employ one of 2 similar methods to iterate on array change:

• use ko.computed
• use observableArray.subscribe

Computed should be something like this:

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

and subscribe is pretty similar, except that it's updating non-ko model's slot:

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

This is not a big deal and performance-wise you probably will not notice it, unless you have way many people in the data. If you don't want to iterate at all, you'll have to change the data model or use case. Say by using $index instead of id to address the items.