Question

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

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

有人可以帮忙吗？先谢谢。

Answer 1

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

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

演示JSFiddle。

Knockout还会将this设置为处理程序中的当前视图模型，但deletePerson和removePerson之间存在很大差异。

在removePerson中，this是一个对象（您的Person对象），但在deletePerson中，这应该是一个基本类型： string < /强>

然而，Knockout使用apply来调用你的函数，它会选择原始类型：JavaScript function call/apply with string

如果您将this注销到控制台，请检查此项。你会看到类似的东西：

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

因此，您最终会在deletePerson的{{1}}中输入一个盒装字符串，并且您需要使用this（或valueOf()）来获取其值：< / p>
toString()

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

Answer 2

您也可以尝试（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);

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

2 个答案: