javascript - UI not updating while using Knockout Observable Array -
i new knockout. trying use observable arrays track changes ui. ui loading initial data stored in array. , trying add new object array dynamically screen.
now able add new object array. ui not getting reflected new changes in array. below html , javascript code.
am missing something.
<html> <head> <link rel="stylesheet" href="bootstrap.css" type="text/css" /> <link rel="stylesheet" href="bootstrap-theme.css " type="text/css" /> <script src="jquery.js" type="text/javascript"></script> <link rel="stylesheet" href="prodconfig.css " type="text/css" /> <script src="jquery.mobile.min.js" type="text/javascript"></script> <link rel="stylesheet" href="cordys.min.css" type="text/css" /> <link rel="stylesheet" href="jquery.mobile.structure.min.css" type="text/css" /> <script src="knockout.js" type="text/javascript"></script> <script src="prodconfig.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="productspage" class="datacontainer"> <div id="productdetails"> <div data-role="content" id="producttable"> <table data-role="table" class="ui-responsive table"> <thead> <tr> <th data-priority="6">product name</th> <th data-priority="1">description</th> <th data-priority="2">parent?</th> </tr> </thead> <tbody id="pbody" data-bind="foreach: products"> <tr class="success"> <td><span data-bind="text: name"></span></td> <td><span data-bind="text: desc"></span></td> <td></td> </tr> </tbody> </table> </div> </div> <div id="prodbuttons"> <button id="addprodproduct">add product</button> <button id="addprodchar">add characteristics</button> <button id="prodbutton">next</button> </div> </div> <div id="addproductpage" data-role="page" > <span><h3>product name</h3></span><input type="text" id="prodnameid"></input> <span><h3>product desc</h3></span><input type="text" id="proddescid"></input> <span><h3>is parent</h3></span><input type="text" id="prodisparentid"></input> <button id="addprodbutton">ok</button> <div> </body> var configarray = new array(); var products = []; var services = new array(); var chars = []; var prd; for(var i=0;i<2;i++){ var product = new object(); product["name"] = "prod"+i+"name"; product["desc"] = "prod"+i+"desc"; product["isparent"] = "prme"; for(var j=0;j<2;j++){ var charr = new object(); charr["name"] = "prod"+i+"char"+j; charr["val"] = "prod"+i+"char"+j+"val"; chars[j] = charr; } product["chars"] = chars; products[i] = product; } var productviewmodel = function(items) { this.items = ko.observablearray(items); this.itemtoadd = ko.observable(""); this.additem = function() { if (this.itemtoadd() != "") { this.items.push(this.itemtoadd()); this.itemtoadd(""); } }.bind(this); }; $(function(){ $('#addprodproduct').click(function() { window.location.href = "#addproductpage"; }); $('#addprodbutton').click(function() { addproduct(); }); prd = new productviewmodel(products); ko.applybindings(prd); }); function addproduct(){ var product = new object(); product["name"] = $('#prodnameid').val(); product["desc"] = $('#proddescid').val(); product["isparent"] = $('#prodisparentid').val(); prd.itemtoadd(product); prd.additem(); window.location.href = '#'; }
you binding products variable instead of items field on viewmodel.
change binding to:
<tbody id="pbody" data-bind="foreach: items">
Comments
Post a Comment