从嵌套的observableArray中删除一个项目

嘿我想从内部（嵌套）observableArray中删除一个项目如下，但删除按钮不起作用（对于内部的foreach项目）。从嵌套的observableArray中删除一个项目

HTML：

<h4>People</h4> 
<ul data-bind="foreach: peoples"> 
    <li> 
     Name at position <span data-bind="text: $index"> </span>: 
     <span data-bind="text: name"> </span> 
     <a href="#" data-bind="click: $parent.removePerson">Remove</a> 
     <ul data-bind="foreach:people"> 
      <li> 
       <span data-bind="text: $data"></span> 
       <button data-bind="click: $parent.deletePerson">Remove</button> 
      </li> 
     </ul> 
    </li> 
</ul> 
<button data-bind="click: addPerson">Add</button>

脚本：

var Person = function(name, children){ 
var self = this; 
    self.name = name; 
    self.people = ko.observableArray(children); 
    self.deletePerson = function() { 
     alert(JSON.stringify(self)); 
     self.people.remove(this); 
    } 
} 


function AppViewModel() { 
    var self = this; 

    self.peoples = ko.observableArray([ 
     new Person('Bert', ['baa', 'bbb']), 
     new Person('Charles', ["caa", "cbb"]) 
    ]); 

    self.addPerson = function() { 
     alert(this); 
     self.peoples.push(new Person("New" ,["Daa", "Dbb"])); 
    }.bind(this); 

    self.removePerson = function() { 

     self.peoples.remove(this); 
    } 
} 

ko.applyBindings(new AppViewModel());

谁能帮助？首先感谢。

来源

2014-10-07 peanut

只需使用其始终设置为当前视图模型您单击处理程序的第一个参数：

self.deletePerson = function(viewModel) { 
    self.people.remove(viewModel); 
}

演示JSFiddle。

Knockout还将this设置为您的处理程序中的当前视图模型，但是您的deletePerson和removePerson有很大差异。

在removePerson的this是一个对象（您的Person对象），但在您的deletePerson的这应该是一个基本类型：一个串。

但是淘汰赛采用apply打电话给你的功能，它箱子基本类型：JavaScript function call/apply with string

你检查这一点，如果你登出this到控制台。你会看到类似这样的：

String {0: "c", 1: "a", 2: "a", length: 3, [[PrimitiveValue]]: "caa"}

所以，你将在this你deletePerson结束盒装字符串，你需要使用valueOf()（或toString()）来获得它的值：

self.deletePerson = function() { 
    self.people.remove(this.valueOf()); 
}

所以只需要使用KO提供的第一个参数，它始终是原始值。

来源

2014-10-07 05:39:32 nemesv

谢谢！只是另一个问题，在这一行警报（JSON.stringify（self））;为什么它显示名称的价值，但没有显示人的价值？ – peanut 2014-10-07 05:59:46

Beacuse'JSON.stringify'只显示原始值，'people'是一个函数，因为它是一个可观察数组。你需要使用'ko.toJSON（）'来获取人们的值，所以你需要写：'alert（ko.toJSON（self））;' – nemesv 2014-10-07 06:01:57

谢谢，这是非常有意义的 – peanut 2014-10-09 03:32:03

你也可以试试（jsfiddle）：

<ul data-bind="foreach:people"> 
<li> 
    <span data-bind="text: name"></span> 
    <button data-bind="click: function() {$parent.people.remove($data)}, text: 'remove ' + name"></button> 
</li> 
</ul> 

var model = { 
people: ko.observableArray([{ name: "a"}, { name: "b"}, { name: "c"}]) 
}; 

ko.applyBindings(model);

来源

2014-10-07 11:36:13 TSV

从嵌套的observableArray中删除一个项目

回答

相关问题