Question

I have an observableArray of records which I bind using a template binding. This works fine. As I want to keep track of the changes of each of the records, the observableArray consists of observables. This works, too.

What I now want is to convert some of the properties of each record (i.e. of each observable) to a different type.

How should I proceed?

Usually, I could use a computed, but in this case I can not add a single computed observable to the array, as I need multiple of them.

So how do I solve this?

Answer 1

Here is a solution using a view model wrapping each item of the observableArray. And this view model can then contain a computed property.

var ItemViewModel = function (value) {
    this.value = ko.observable(value);
    this.computedValue = ko.computed(function () {
        return this.value() * 2;        
    }, this);    
};

var ViewModel = function (list) {
    var self = this;
    self.list = ko.observableArray([]);                
    ko.utils.arrayForEach(list, function (value) {
         self.list.push(new ItemViewModel(value)); 
    });
};

ko.applyBindings(new ViewModel([1,2,3]));


<ul data-bind="foreach: list">
<li data-bind="text: computedValue"></li>
</ul>