javascript - knockout computed not being updated -
i trying create computed observable , display on page, , have done way before starting wonder if knockout has changed - works except binding on totalamount - reason never changes...any ideas?
my model follows:
var cartitem = function(item){ this.itemname = item.title; this.itemprice = item.price; this.itemid = item.id; this.count=0; } var cartmodel = { self:this, footers:ko.observablearray([{title:'item1',text:'this item1 text',image:'images/products/items/item1.png',price:15.99,id:1}, {title:'item2',text:'this item2 text',image:'images/products/items/item2.png',price:25.99,id:2}, {title:'item3',text:'this item3 text',image:'images/products/items/item3.png',price:55.99,id:3}, {title:'item4',text:'this item4 text',image:'images/products/items/item4.png',price:5.99,id:4}, ]), cart:ko.observablearray([]), addtocart:function(){ if(cartmodel.cart().length>0){ for(var i=0;i<cartmodel.cart().length;i++){ if(this.id==cartmodel.cart()[i].itemid){ cartmodel.cart()[i].count += 1; } else{ cartmodel.cart().push(new cartitem(this)); } } }else{ cartmodel.cart().push(new cartitem(this)); } console.log(cartmodel.cart().length); } } this.cartmodel.totalamount=ko.computed(function(){ return this.cart().length; },this.cartmodel); ko.applybindings(cartmodel);
and here associated html:
<div data-bind="template:{name:'footertemplate',foreach:cartmodel.footers}"> <script type="text/html" id="footertemplate"> <div class="row"> <span class="span2"><h3 data-bind="text: title"></h3></span> <span class="span2"><img data-bind="attr:{src: image}"/></span> <span class="span5" data-bind="text:text"></span> <span class="span1" data-bind="text:price"></span> <spand class="span2"><button data-bind="click:$parent.addtocart">add</button></span> </div> </script> </div> <div class="row"> <span class="span2" data-bind="text:totalamount"></span> </div>
you calling push method on internal array, not on observablearray wrapper, changes never notified.
i.e. instead of:
cartmodel.cart().push(new cartitem(this));
use simply:
cartmodel.cart.push(new cartitem(this));
for more info take @ official documentation observablearray, , in particular @ reading information observablearray , manipulating observablearray sections.
Comments
Post a Comment