How to calculate the knockout of an observable array from another model?
I study knockouts, so please bear with me ...
Take this code:
HTML:
<div id="itemsContainer">
</div>
<div id="cartContainer">
<label data-bind="text: totals"></label>
</div>
<div id="items"></div>
Javacript:
function ItemsViewModel() {
var self = this;
self.items = ko.observableArray().publishOn("items");
self.items.push({
count: 2,
price: 100
});
self.items.push({
count: 3,
price: 200
});
}
function CartViewModel() {
var self = this;
self.totals = ko.computed(function() {
var total = 0;
$.each(self, function(i, m) {
total = total + (m.count * m.price);
});
return total;
}, this).subscribeTo("items", true);
}
var itemsVM;
var cartVM;
itemsVM = new ItemsViewModel();
ko.applyBindings(itemsVM, document.getElementById("itemsContainer"));
cartVM = new CartViewModel();
ko.applyBindings(cartVM, document.getElementById("cartContainer"));
I want to update the "totals" based on the data I have entered (or changed) in the Items ItemsModel.items.
I am stuck now and have no idea how to make it work?
source to share
I'm not sure if it works subscribeTo
on computed as you tried ... A quick fix would be to create a (private) mirror inside the constructor CartViewModel
and use it incomputed
function CartViewModel() {
var self = this;
var allItems = ko.observableArray([]).subscribeTo("items", true);
self.totals = ko.computed(function() {
return allItems().reduce(function(total, m) {
return total + (m.count * m.price);
}, 0);
});
}
Note. I replaced yours $.each
with Array.prototype.reduce
;)
Edit: I found another answer in the docs : you can use the transform function:
function CartViewModel() {
var self = this;
self.totals = ko.observableArray([])
.subscribeTo("items", true, function(items) {
return items.reduce(function(total, m) {
return total + (m.count * m.price);
}, 0);
});
};
Updated fiddle with mirror approach: http://jsfiddle.net/qzLkjLL1/
Updated script with conversion approach: http://jsfiddle.net/ynoc6hha/
source to share