javascript - knockout.js 使删除按钮在连接到一个 View 模型的两个 View 模型中工作

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">
    <ul data-bind="foreach: cardlists">
           <li>
               <span data-bind="text: $data"></span>
               <a href="#" data-bind="click: $root.removecard">Del</a>
           </li>
    </ul>
</div>

这是 View 模型

  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 SimpleListModel2 = function(cardlists) {
    var self = this;
    self.cardlists= ko.observableArray(cardlists);
    self.removecard = function (cardlist) {
                self.cardlists.remove(cardlist);
     };
};

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

})();
ko.applyBindings(masterVM);  

这是我项目中的副本。当我有第二个 View 模型时，删除按钮停止工作。 $root.removecard 未定义。我怎样才能让我的 $root.removecard 在这种情况下使用一个 mainviewmodel 工作。

Answer 1

当您将 $root.removecard 更改为 $parent.removecard 时，它会起作用。

  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 SimpleListModel2 = function(cardlists) {
    var self = this;
    self.cardlists= ko.observableArray(cardlists);
    self.removecard = function (cardlist) {
                self.cardlists.remove(cardlist);
     };
};

var masterVM = (function () {
         var self = this;      
         self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);
         self.SimpleListModel2= new SimpleListModel2([ "Tall Hat", "LongCloak"]);
      
})();
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: 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">
    <ul data-bind="foreach: cardlists">
           <li>
               <span data-bind="text: $data"></span>
               <a href="#" data-bind="click: $parent.removecard">Del</a>
           </li>
    </ul>
</div>