knockout.js remove 不适用于主视图模型中的嵌套视图模型和视图模型答案

【问题标题】：knockout.js remove doesn't work with nested viewmodel and viewmodel in main viewmodelknockout.js remove 不适用于主视图模型中的嵌套视图模型和视图模型
【发布时间】：2017-09-01 16:11:08
【问题描述】：

 <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>

这是视图模型

    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);

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

removecard 现在在这种情况下不起作用，至少对我来说。

【问题讨论】：

标签： javascript asp.net-mvc mvvm knockout.js

【解决方案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>

【讨论】：