knockout.js - Knockout JS Template With Inner Foreach -
<!doctype html> <html> <head> <title>knockout template inner foreach</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="knockout-min.js"></script> </head> <body> <div id="maindiv" data-bind="template: { name: currentsection }" style="border: 1px solid red"> </div> <button data-bind="click: next">next</button> <div id="templateszone" style="display:none"> <div id="template1"> template1 </div> <div id="template2"> template2 </div> <div id="template3"> <div data-bind="foreach: customers"> <div class="customerdiv"> <span data-bind="text: name"></span> <span data-bind="text: age"></span> </div> </div> </div> </div> <p data-bind="text: currentsection"></p> <p data-bind="text: currentsectionkey"></p> <script type="text/javascript"> function customer(name, age) { var self = this; self.name = name; self.age = age; } function testviewmodel() { var self = this; self.customers = ko.observablearray([ new customer("jake", 25), new customer("ritchie", 44), new customer("clarence", 34), new customer("vince", 22) ]); self.templates = [ "template1", "template2", "template3", ]; self.currentsectionkey = ko.observable(0); self.nextenabled = ko.computed(function() { return ( self.currentsectionkey() < (self.templates.length - 1) ); }); self.next = function() { if(self.nextenabled()) { self.currentsectionkey( self.currentsectionkey() + 1 ); } }; self.currentsection = ko.computed(function() { return self.templates[self.currentsectionkey()]; }); } $(document).ready(function() { ko.applybindings(new testviewmodel()); }); </script> </body> </html> i use dynamic templates. 1 of templates has foreach on customers. have defined 4 customers. 4 times 4 customers in template3. did make mistake? or bug in knockout js?
jsfiddle: http://jsfiddle.net/kamikazefish/bxym5/
to see what's wrong remove display:none on templeszone. after applybindings binding applied templates changed. should change them div <script type="text/html"></script>.
here modified jsfiddle: http://jsfiddle.net/bxym5/1/
Comments
Post a Comment