Knockout计算可观察数组的项目

Question

I have the following ViewModel:

var myViewModel = {
  categories: ko.observableArray([
    { name: ko.observable('Fruit'), 
      items: ko.observableArray([ 
        ko.observable('Apple'),
        ko.observable('Orange'), 
        ko.observable('Banana'), 
      ]),
    },
  ]),
};

I want to add a computed value for each item of this array:

$.each(myViewModel.categories(), function(index, cat){
  cat.num = ko.computed(function(){
    return cat.items().length;
  }, cat);
});

This is my HTML:

<ul data-bind="foreach: { data: categories, as: 'category' }">
    <li>
        <ul data-bind="foreach: { data: items, as: 'item' }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
            </li> 
        </ul>
      <span data-bind="text: category.num"></span>
    </li>
</ul>

And it works just great! Here is the result:

Fruit: Apple
Fruit: Orange
Fruit: Banana
3

But now let's say my data has changed and I need to reflect those changes:

myViewModel.categories([
  {
    name: "Fruit",
    items: ["Apple", "Banana"],
  },
  {
    name: "Veg",
    items: ["Potato", "Carridge"],
  }
]);

And it doesn't work - I don't see num at the end of each list. Could you please help me to fix this? Here is the codepen

Answer 1

Of course it does not work, because you are replacing the entire content of the observableArray . This code of yours:

$.each(myViewModel.categories(), function(index, cat){
    cat.num = ko.computed(function(){
        return cat.items().length;
    }, cat);
});

adds the num property to the items that exist in the array at the time of the call. By giving a new backing array to your observableArray by doing this:

myViewModel.categories([
  {
    name: "Fruit",
    items: ["Apple", "Banana"],
  },
  {
    name: "Veg",
    items: ["Potato", "Carridge"],
  }
])

you, of course, lose the old array and thus the computed observables which are defined on the items and not the observable array. Knockout of course has no way to know how and whether it should add the computed property to every item in the new array.

Solution:

You can either do the same property addition when you replace the backing array of your observableArray like this:

myViewModel.categories([
  {
    name: "Fruit",
    items: ["Apple", "Banana"],
  },
  {
    name: "Veg",
    items: ["Potato", "Carridge"],
  }
]);
$.each(myViewModel.categories(), function(index, cat){
    cat.num = ko.computed(function(){
        return cat.items().length;
    }, cat);
});

or better yet, you could instantiate the objects in the array with the property already defined. Note: you don't have to write the function over and over again for each item, you could, for instance, define a constructor for the array items:

function Category(name, items) {
  var self = this;

  this.name = name;
  this.items = ko.observableArray(items);
  this.num = ko.computed(function() {
    return self.items().length;
  });
};

and then, this is how you create a new one:

var newItem = new Category('Category 1', [ 'Apple', 'Banana']);

and insert it into the observable array:

myViewModel.categories.push(newItem);

this adds one item and keeps the existing ones, or, as you did, you could supply a whole new array as so:

myViewModel.categories([
  new Category('Fruit', ['Apple', 'Banana' ]),
  new Category('Veg', ['Potato', 'Carridge' ])
]);