2012-08-16 4 views
0

다음 개체가 있습니다.KnockoutJS; 바운드 값이 업데이트되지 않거나 ko.computed()가 업데이트되지 않음

var q = { 
    availableModels: ko.observableArray(); 
    selectedModel: ko.observable(); 
    displayModel: function(item) { return item.text; } 
    image: ko.computed(function() { 
     return q.selectedModel().image; 
    }); 
} 

다음 요소에 바인딩되어 있습니다.

<select data-bind="options: availableModels, value: selectedModel, optionsText: displayModel, optionsCaption: 'Choose a Model'"></select> 

이미지와.

<img data-bind="attr: { src: image }"> 

일부 개체를 availableModels에 넣습니다.

q.availableModels.push({ index: 0, text: 'castis0', image: 'castis0.jpg'}); 
q.availableModels.push({ index: 1, text: 'castis1', image: 'castis1.jpg'}); 

나는 다음 selectedModel

q.selectedModel({ index: 1, text: 'castis2', image: 'castis2.jpg' }); 

HTML 요소는 내가 availableModels으로 밀어했지만 현재 선택한 요소가 selectedModel을 설정하여 변경되지 않는 객체를 포함하지를 설정합니다.

변경 사항을 그대로 적용하면 작동합니다.

q.selectedModel = ko.computed(function() { 
    for(var i = 0; i < q.availableModels().length; i++) { 
     var data = q.availableModels()[i]; 
     if (data.index == 1) { 
      return data; 
     } 
    } 
}) 

그러나 이미지의 src는 변경되지 않습니다.

내가 여기 어떻게됩니까

답변

2

당신이 동일한 개체에 대한 참조를 처리하지 않는 것입니다, 내가 변경해야하는 것을 알고 취소입니다.

q.selectedModel(q.availableModels()[1]); 

이 방식에 몇 가지 문제가 있습니다

var a = { name: "Bob" }; 
var b = { name: "Bob" }; 
var c = b; 

alert(a === b); //false 
alert(b === c); //true 

따라서, 귀하의 경우, 당신은 같은 배열에서 실제 객체와 동일한 selectedModel을 설정해야합니다 : 다음은 샘플입니다 당신의 뷰 모델도 정의되어 있어야합니다. 객체 리터럴로 정의하는 경우 각 속성 사이에 쉼표를 사용해야합니다. 또한 계산 된 관측 가능 변수는 즉시 평가하려고 시도하고 닫히기 전까지는 해당 개체 리터럴의 속성에 액세스 할 수 없습니다. http://jsfiddle.net/rniemeyer/sq263/

+0

이 아 ... 그래 그 이해하기이 방법은 쉽게 : 여기

몇 가지 변화와 업데이트 된 샘플입니다. 나는 당신의 바이올린에서 제안 된 변경 사항을 만들었고 모든 것이 이제 작동합니다. 고맙습니다! – castis

관련 문제