javascript - Knockout: custom binding update not firing on computed field -
i'm trying render cart table using knockout.
i've cart entity , cartitem entity:
var cartitem = function(product, qty){ var self = this; self.product = ko.observable(product); self.qty = ko.observable(qty); self.title = ko.computed(...); self.unitprice = ko.computed(function(){ return self.product().price(); }); self.price = ko.computed(function(){ return self.unitprice()*self.qty(); }); } var cart = function(){ var self = this; self.items = ko.observablearray([]); self.total = ko.computed(function(){ var total = 0; ko.utils.arrayforeach(ko.utils.arraymap(self.items(), function(i){ return i.price() }), function(price){ total += price; }); return total; }); }
and html:
<table class="table"> <thead> <tr> <th>product</th> <th>price</th> <th>qty</th> <th>total</th> </tr> </thead> <tfoot> <tr> <td colspan="3">total:</td> <td data-bind="price: cart.total"></td> </tr> </tfoot> <tbody data-bind="foreach: cart.items"> <tr> <td data-bind="text: title"></td> <td data-bind="price: unitprice"></td> <td data-bind="text: qty"></td> <td data-bind="price: price"></td> </tr> </tbody> </table>
as can see, i've create 'price' binding render price, code:
ko.bindinghandlers.price = { init : ko.bindinghandlers.text.init, update: function(element, valueaccessor, allbindings, data, context) { var value = ko.unwrap(valueaccessor()); var text = '€ ' + value.tofixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 "); ko.bindinghandlers.text.update(element, function(){ return text; }, allbindings, data, context); } };
the custom binding 'price' works cart items not cart.total, nothing rendered.
i've inserted console.log(element) in price binding , cart items printed when cart updated , can't figure out why.
using instead 'text: cart.total' works.
the js custom binding included after start of knockout application.
i've included custom binding before , works.
Comments
Post a Comment