Question

我有以下代码用于敲除绑定：

HTML：

   <div data-bind="visible: people().length > 0">
    <div data-bind="foreach: people"> <span data-bind="text: title"></span>
 <span data-bind="text: forename"></span>
 <span data-bind="text: surname"></span>

        <button data-bind="click: $root.removePerson">Remove</button>
        <br />
    </div>
</div>
<div data-bind="with: Person">
    <input type="text" data-bind="value: title" />
    <input type="text" data-bind="value: forename" />
    <input type="text" data-bind="value: surname" />
    <button data-bind="click: $root.addPerson">Add</button>
</div>

使用Javascript：

   var my = my || {};
Person = function () {
    var self = this;
    self.title = ko.observable(null);
    self.forename = ko.observable(null);
    self.surname = ko.observable(null);
};
my.vm = function () {
    var people = ko.observableArray([]),
        addPerson = function (jh) {
            people.push(jh);
        },
        removePerson = function (jh) {
            people.remove(jh);
        };
    return {
        people: people,
        addPerson: addPerson,
        removePerson: removePerson
    };
}(new Person());

ko.applyBindings(my.vm);

我正在努力将Person对象添加到一个可观察的数组（人）中并将其显示在顶部以创建一个具有添加和删除功能的人数组。

jsFiddle here

有人可以告诉我我错过了什么吗？

更新：我已经整理了一点代码，现在问题可以在小提琴上看到，添加单个对象更新所有数组对象并删除对象会从数组中删除所有对象这是问题所在。感谢您的帮助。

Answer 1

您遇到的问题是您始终在处理Person的单个实例。因此，您要添加，更新和删除相同的实例。

更好的方法可能是使用包含新人的personForEditing可观察对象。然后，在执行addPerson时，您会将此人添加到observableArray并将personForEditing替换为下一个条目的新实例。基于您的代码：

my.vm = function () {
    var people = ko.observableArray([]),
        addPerson = function (jh) {
            people.push(jh);
            personForEditing(new Person());
        },
        removePerson = function (jh) {
            people.remove(jh);
        },
        personForEditing = ko.observable(new Person())
    return {
        people: people,
        addPerson: addPerson,
        removePerson: removePerson,
        personForEditing: personForEditing
    };
}();

更新样本：http://jsfiddle.net/rniemeyer/xms4d/

Answer 2

您正在重新分配变量人员。

首先将它设置为一个observable然后设置为一个函数。

故障就在这里：

var people = ko.observableArray([]),
    people = function (p) {
        people.push(p);
    }, ... ;

knockout将javascript对象添加到可观察数组中

2 个答案: