녹아웃 개체 값이 변경되지만 UI는 동일하게 유지됩니다.

Question

SelectedFormat 값에 바인딩 된 드롭 다운 목록이 있습니다. 목록 옵션은로드시 외부 소스로부터 채워지며 뷰 모델 data.Format id에 대한 객체베이스와 일치합니다.

누군가가 말해 수 js fiddle

를 살펴 보자 왜 모델을 업데이트하지만 UI가 올바른 Format.Name

감사로 업데이트되지 않습니다.

HTML :

<div data-bind="text:data.Format.Name"></div> 
<select data-bind=" 
    options:Controls, 
    optionsText: 'Name', 
    value: data.SelectedFormat"></select> 

모델 : 코드에서

var jsonData = { 
    Id: "abc-123", 
    Name: "Chicken Cheese", 
    Format: { 
     Id: 2, 
     Name: 'Medium', 
     Other: 'Bar' 
    } 
}; 

var self = this; 
self = ko.mapping.fromJS(data); 
self.SelectedFormat = ko.observable(
    //return the first match based on id 
    $.grep(vm.Controls,function(item){    
     return item.Id === self.Format.Id(); 
    })[0] 
); 

//when changed update the actual object that will be sent back to server 
self.SelectedFormat.subscribe(function (d) { 
    this.Format = d;   
},self); 

Answer 1

, 당신은 Format 및 SelectedFormat 있습니다. 전자는 관찰 할 수 없으므로 업데이트를 트리거 할 수 없습니다. 대신 SelectedFormat을 사용해야합니다.

<div data-bind="text:data.SelectedFormat().Name"></div> 

예 : http://jsfiddle.net/QrvJN/9/