녹아웃 observablear of observables

Question

관찰 가능한 속성을 가진 개체로 구성된 녹아웃 ObservableArray에 문제가 있습니다. 내보기 모델은 상당히 복잡하지만 문제를 설명 할 수있는 간단한 테스트를 만들었습니다.

내 문제는 ObservableArray의 개체 중 하나에서 관찰 가능 속성의 값을 변경하면 해당 값이 ALL 개체에 대해 변경된다는 것입니다.

부서에 관찰 가능한 배열을 가진 viewModel 부서가 있습니다. 그런 다음 직원 ObservableArray에 푸시당하는 개체 personVM의 인스턴스 5 개를 만듭니다. 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); 
}); 

이렇게하면 5 개의 이름 (EMP-1, EMPT-2 등)이 추가됩니다. 그런 다음 다음 마크 업과 함께 이름을 표시합니다.

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

출력 내용은 "EMP-5"라는 이름으로 다섯 번입니다. 항상 배열에 추가 한 마지막 값입니다.

문제는 내가 personVM의 인스턴스가 5 개 있지만 각 인스턴스의 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);