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");
    }
}

这样可以避免在$parent循环中绑定foreach：

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

这里还有fiddle这些更新。

使用foreach Knockout绑定更新列表项

1 个答案: