击倒可观察器

knockout observablearray of observables

本文关键字:观察      更新时间:2023-09-26

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

我的问题是,当我更改ObservableArray中某个对象的可观察属性的值时,该值将更改为数组中ALL对象的值。

我有一个部门视图模型,它有一个可观察到的该部门员工数组。然后,我创建了对象personVM的5个实例,这些实例被推送到员工ObservableArray上。personVM的每个实例都有一个唯一的firstName。

以下是模型和加载它们的代码。

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对象指向相同的可观察对象。这是正确的吗?

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

试试这个

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