javascript - knockout 可观察值可观察值数组

Question

我在使用由具有可观察属性的对象组成的 Knockout ObservableArray 时遇到问题。我的 View 模型相当复杂，但我创建了下面的简单测试来说明问题。

我的问题是，当我更改 ObservableArray 中的一个对象中的可观察属性的值时，该数组中的所有对象的值都会更改。

我有一个部门 View 模型，其中有该部门的可观察的员工数组。然后，我创建对象 personVM 的 5 个实例，并将其推送到员工 ObservableArray 上。 personVM 的每个实例都有一个唯一的名字。

这里是模型和加载它们的代码。

var theDepartmentVM = {
        employees: ko.observableArray(), 
        departmentName: ko.observable()
};

var personVM= {
    firstName: ko.observable()
    }

$(document).ready(function (){
    departmentVM.departmentName = "SomeDepartment";
    for (i=1; i<=5; i++){
        var person = Object.create(personVM);
        personVM.firstName("EMP - " + i.toString());
        departmentVM.employees.push(personVM);
    }
    ko.applyBindings(departmentVM);
});

这会添加五个名称(EMP-1、EMPT-2 等)。然后我用以下标记显示名称:

<div data-bind="foreach: employees">
   <label data-bind="text: firstName"></label>
</div>

我的输出是名称“EMP-5”五次。它始终是我添加到数组中的最后一个值。

我认为问题是我有五个 personVM 实例，但每个实例中的firstName 对象都指向相同的可观察对象。这是正确的吗？

我需要做什么才能得到想要的结果？

Answer 1

试试这个

http://jsfiddle.net/r9sqjojL/2/

<div data-bind="foreach: employees">
   <label data-bind="text: firstName"></label>
</div>
var departmentVM = {
        employees: ko.observableArray(), 
        departmentName: ko.observable()
};

var personVM = function() {
        this.firstName = ko.observable();
}
departmentVM.departmentName = "SomeDepartment";
for (i=1; i<=5; i++){
        var person = new personVM();
        person.firstName("EMP - " + i.toString());
        departmentVM.employees.push( person );
}
ko.applyBindings(departmentVM);