淘汰 observablearray of observables

Question

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

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

我有一个部门 viewModel，它在该部门有一组可观察的员工。然后，我创建了 5 个对象 personVM 实例，这些实例被推送到员工 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 对象指向同一个 observable。这是正确的吗？

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

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