Question

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

这是viewmodel

    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现在在这种情况下至少对我不起作用。

Answer 1

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

$parents[0] - ＆gt;父

$parents[1] - ＆gt;祖父母

等

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>

knockout.js remove不能在主视图模型中使用嵌套的viewmodel和viewmodel

1 个答案: