javascript - knockout.js observable array binding -
this code
<div data-bind="foreach: baselist"> <div> <span data-bind="text: basename"></span> <div data-bind="foreach: subitems"> <span data-bind="text: subitemname"></span> <a href="#" data-bind="click: $parent.removecard">del</a> </div> </div> <button data-bind="click:addchild">add</button> this viewmodel
var simplelistmodel2 = function(baselist) { this.baselist= ko.observablearray(baselist); this.addchild = function(list) { alert(list.basename()); }.bind(this); self.removecard = function (cardlist) { this.cardlists.remove(cardlist); }; }; this data passing viewmodel. how can include baselist in data? cant find baselist
var initialdata = [{ { basename: "danny", subitems: [ { subitemname: "mobile"}, { subitemname: "home"}] }, { basename: "sensei", subitems: [ { subitemname: "mobile"}, { subitemname: "home"}] }];
from html provided, can see structure this.
baselist -> {(basename), (subitems -> subitemname)}
so seems need pass data viewmodel during initialization. , remove parenthesis alert(list.basename); here because not observable object.
var simplelistmodel2 = function(baselist) { this.baselist = ko.observablearray(baselist); this.addchild = function(list) { alert(list.basename); }.bind(this); }; var initialdata = [ { basename: "danny", subitems: [ { subitemname: "mobile"}, { subitemname: "home"}] }, { basename: "sensei", subitems: [ { subitemname: "mobile"}, { subitemname: "home"}] }]; ko.applybindings(new simplelistmodel2(initialdata)); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: baselist"> <div> <span data-bind="text: basename"></span> <div data-bind="foreach: subitems"> <span data-bind="text: subitemname"></span> </div> </div> <button data-bind="click:$parent.addchild">add</button> </div>
Comments
Post a Comment