2017-04-06 114 views
0
<div data-bind="with: SimpleListModel"> 
<form data-bind="submit: addItem" > 
    New item: 
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> 
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button> 
    <p>Your items:</p> 
    <select multiple="multiple" width="50" data-bind="options: items"> </select> 
</form> 
</div> 


<div data-bind="with: SimpleListModel2"> 
<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:$parent.addChild">Add</button> 
</div> 
</div> 

这不起作用是视图模型knockout.js删除嵌套视图模型视图模型,并在主视图模型

var SimpleListModel = function(items) { 
    this.items = ko.observableArray(items); 
    this.itemToAdd = ko.observable(""); 
    this.addItem = function() { 
     if (this.itemToAdd() != "") { 
      this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update. 
      this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable 
     } 
    }.bind(this); // Ensure that "this" is always this view model 
}; 

var initialData = [ 
{ basename: "Danny", subItems: [ 
    { subitemname: "Mobile"}, 
    { subitemname: "Home"}] 
}, 
{ basename: "Sensei", subItems: [ 
    { subitemname: "Mobile"}, 
    { subitemname: "Home"}] 
}]; 

var SimpleListModel2 = function(baselist) { 
    var self= this; 
    self.baselist= ko.observableArray(baselist); 
    self.addChild = function(list) { 
    alert(list.basename); 
    }.bind(this); 

    self.removecard = function (data) { 
    //tried 
     data.baselist.subItems.remove(data); 
     data.subItems.remove(data); 
     $.each(self.baselist(), function() { this.subItems.remove(data) }) 
    }; 
}; 

var masterVM = (function() { 
     var self = this;  
     self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]); 
     self.SimpleListModel2= new SimpleListModel2(initialData); 

})(); 

ko.applyBindings(masterVM); 

这是一个小的代码片段我构建了我的项目。有人可以使删除卡工作?我的问题的最后两个增量属于同一类型。但这个问题是我达到的最高水平。

removecard现在在这种情况下不起作用,至少对我而言。

回答

1

使用$parents[index]可以找到特定的父级。 http://knockoutjs.com/documentation/binding-context.html

$parents[0] - >父

$parents[1] - >祖父母

var initialData = [ 
 
    { basename: "Danny", subItems: [ 
 
    { subitemname: "Mobile"}, 
 
    { subitemname: "Home"}] 
 
}, 
 
{ basename: "Sensei", subItems: [ 
 
    { subitemname: "Mobile"}, 
 
    { subitemname: "Home"}] 
 
}]; 
 

 
var SimpleListModel2 = function(baselist) { 
 
    var self= this; 
 
    self.baselist= ko.observableArray(baselist); 
 
    self.addChild = function(list) { 
 
    alert(list.basename); 
 
    }.bind(this); 
 

 
    self.removecard = function (data) { 
 
    //tried 
 
    console.log(data); 
 
    }; 
 
}; 
 

 
var masterVM = (function() { 
 
    var self = this;  
 
    self.SimpleListModel2= new SimpleListModel2(initialData); 
 
})(); 
 

 
ko.applyBindings(masterVM);
<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="with: SimpleListModel2"> 
 
    <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: $parents[1].removecard">Del</a> 
 
     </div>  
 
    </div> 
 
    <button data-bind="click:$parent.addChild">Add</button> 
 
    </div> 
 
</div>