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

Posted 2023-03-27

【中文标题】knockout.js remove 不适用于主视图模型中的嵌套视图模型和视图模型

【英文标题】：knockout.js remove doesn't work with nested viewmodel and viewmodel in main viewmodel

【发布时间】：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"  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 现在在这种情况下不起作用，至少对我来说。

【参考方案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>