KnockoutJS 중복 값으로 바인딩되는 바인딩

Question

개념 증명으로 Knockout.js를 사용하여 간단한 응용 프로그램을 작성합니다. 내가 Knockout을 처음 접했을 때,이 질문의 코드는 완벽하지 못하고 나쁜 관행을 보여줄 수 있습니다. 그렇다면 저에게 알려주세요! 나는 select 요소의 내용을 생산하기 위해 options 바인딩을 사용하고

:보기 모델은 다음과 같습니다

<select data-bind="options: titles, optionsText: 'display', optionsValue: 'value'"> 
</select> 

:

DOM에

var ViewModel = function() { 
    this.titles = ko.observableArray([]); 
}; 

나는에 일부 값을 밀어하고 준비 관찰 가능 배열 (각 값은 "Mr", "Mrs"등 "제목"을 나타내는 개체 리터럴입니다.) :

값이 "Mr"인 두 개의 개체가있는 이유를 묻지 마십시오. 처리해야하는 데이터가옵니다. 나는 그것을 바꿀 수 없다. 그러나 이것이 문제의 원인입니다. 첫 번째 객체가 선택된 옵션을 나타낼 것으로 기대하지만, 그렇지 않습니다. 세 번째 객체는 실제로 기본 선택 항목으로 끝나는 option 요소를 나타냅니다.

이것은 관찰 가능한 배열이 루프 반복으로 option 요소가 하나씩 DOM에 추가된다는 사실 때문인 것 같습니다. 녹아웃은 값을 검사하여 선택한 옵션을 유지하려고 시도합니다. 첫 번째 반복 후 선택한 option의 값은 "Mr"입니다. 세 번째 반복 후에 값이 "Mr"인 또 다른 option이 있습니다. 따라서 Knockout은 이전에 선택한 옵션이라고 생각하고 선택합니다.

여기에 link to a fiddle이 있습니다. "기본값"옵션을 선택해야하지만 그렇지 않습니다. 버튼을 클릭하여 동일한 값을 가진 다른 옵션을 다시 추가하면 해당 옵션이 선택되지만 설명서에 따라 선택하면 안됩니다.

제 질문은 어떻게 이런 행동을 막을 수 있습니까?

Answer 1

왜 항목을 하나씩 배열로 푸시합니까? 당신은 할 수 :

view.titles(data); 

대신이 또한 문제를 해결하는 것

for(var i = 0; i < data.length; i++) { 
    view.titles.push(data[i]); //Push titles into observable array 
} 

의 - 첫 번째 항목은 기본적으로 선택 될 것이다. 또한 해당 배열에 새 항목을 추가 할 계획이 없다면 ko.observableArray 대신 ko.observable을 사용할 수 있습니다.

업데이트 : Knockoutjs는 같은 값을 가진 여러 옵션을 좋아하지 않는 것 같습니다. select 태그에 값 바인딩을 추가하면 코드가 제대로 작동하지 않습니다 (첫 번째 항목이 아닌 세 번째 항목을 선택합니다). 그러나 knockoutjs를 사용하면 값 바인딩을 통해 선택한 객체에 액세스 할 수 있으므로 값 바인딩을 통해 optionsValue 바인딩 및 액세스 값을 제거 할 수 있습니다. jsfiddle.net/ej9Ue/1