使用 foreach 敲除绑定更新列表项

Question

淘汰网站有一个使用 foreach 绑定添加和删除列表项的绝佳示例，但是您将如何更新这些值？我在下面的小提琴中尝试过这样做，但是 DOM 元素没有响应我的更新：http://jsfiddle.net/SC5Lw/1/

<ul data-bind="foreach: people">
    <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>
        <a href="#" data-bind="click: $parent.updatePerson">Update</a>
    </li>
</ul>

var person1 = ko.observable({ name: 'Bert' });
var person2 = ko.observable({ name: 'Charles' });
var person3 = ko.observable({ name: 'Denise' });

self.people = ko.observableArray([person1, person2, person3]);

...

self.updatePerson = function(person) {
    for(var i = 0 ; i < self.people.length ; i++)
    {
        if(self.people[i].name === person.name)
        {
            self.people[i].name = 'Bob';
        }
    }
};

我已经将 observableArray 的元素本身变成了 observables，所以我不确定为什么它们绑定的元素不会对视图模型中的属性更改做出反应。

Answer 1

您需要做的是为具有ko.observable 的人创建一个名为name 的类。这不是你在这里所做的。您已将person1 设为可观察的，但它包含一个对象字面量，其中包含一个名为name 的普通属性。

类似这样的：

function Person(name) {
    var self = this;
    self.name = ko.observable(name);
}

现在在您的父虚拟机中：

var person1 = new Person('Bert');
var person2 = new Person('Charles');
var person3 = new Person('Denise');

self.people = ko.observableArray([person1, person2, person3]);

这是一个有效的fiddle。

另外，我不会打扰你的循环来找到匹配的person。您已经拥有此人，因此只需在此处更改其财产即可。

所以而不是这个（无论如何都不起作用，因为people 是一个函数，而不是一个属性）：

self.updatePerson = function(person) {
    for(var i = 0 ; i < self.people.length ; i++)
    {
        if(self.people[i].name === person.name)
        {
            self.people[i].name = 'Bob';
        }
    }
};

你可以这样做：

self.updatePerson = function(person) {
    person.name("Bob");
}

您甚至可以通过将此函数移至您的 Person 视图模型并在那里执行此操作来使其更简洁：

function Person(name) {
    var self = this;
    self.name = ko.observable(name);
    self.updateMe = function() {
        self.name("Bob");
    }
}

这避免了在 foreach 循环中绑定 $parent：

    <a href="#" data-bind="click: updateMe">Update</a>

这里有一个 fiddle 也有这些更新。