녹아웃 뷰 모델 업데이트시 검도 UI 드롭 다운이 업데이트되지 않음

Question

녹아웃 뷰 모델이 변경 될 때 해당 UI를 업데이트하지 않는 검도 UI 드롭 다운이 있습니다. 나는 새 모델 값을 표시하기 위해 일반 HTML 선택 및 일반 텍스트 상자를 얻을 수 있지만 검도 UI는 표시 할 수 없습니다. 나는 무엇을 간과하고 있는가?

다음은 코드 샘플 (및 JSFiddle)입니다. fruitId는 처음에 "2"(주황색)이고, 그 다음에 "3"(바나나)이어야합니다. 텍스트 상자와 두 개의 드롭 다운은 녹아웃 뷰 모델 (fruitId)의 동일한 값에 바인딩됩니다.

검도 UI 드롭 다운을 수동으로 변경하면 녹아웃 뷰 모델이 업데이트되고 일반 드롭 다운 및 텍스트 상자에 새 값이 표시됩니다. 그러나 단추를 클릭하고보기 모델을 코드로 업데이트하면 텍스트 상자와 일반 드롭 다운에 올바른 값이 표시되지만 검도 UI 드롭 다운은 표시되지 않습니다.

html로

<p> 
    <label for="kendoDropDown">Kendo UI Drop Down</label> 
    <input id="kendoDropDown" type="text" data-bind="value: fruitId" /> 
</p> 
<p> 
    <label for="select">Plain old select</label> 
    <select id="select" data-bind="value: fruitId"> 
     <option value="1">apple</option> 
     <option value="2">orange</option> 
     <option value="3">banana</option> 
    </select> 
</p> 
<p> 
    <label for="textBox">Plain old text box</label> 
    <input id="textBox" type="text" data-bind="value: fruitId" class="k-textbox" /> 
</p> 
<p> 
    <button id="changeTo3" class="k-button">change fruitId to "3" (banana) programmatically</button> 
</p> 
<p> 
    <button id="changeTo2" class="k-button">change fruitId to "2" (orange) programmatically</button> 
</p> 

자바 스크립트

// Define the Knockout view model 
var ViewModel = function (data) { 
    var self = this; 
    self.fruitId = ko.observable(data.fruitId); 
} 

// Init the drop down 
var kendoDropDownData = [ 
    { id: "1", name: "apple"}, 
    { id: "2", name: "orange" }, 
    { id: "3", name: "banana" } 
]; 
$("#kendoDropDown").kendoDropDownList({ 
    dataValueField: "id", 
    dataTextField: "name",  
    dataSource: kendoDropDownData 
}); 

// Wire up KO bindidng 
var initialData = { fruitId: "2" }; 
ko.applyBindings(new ViewModel(initialData)); 

// Wire up the buttons 
$("#changeTo3").click(function() { 
    var newData = { fruitId: "3" }; 
    ko.applyBindings(new ViewModel(newData)); 
}); 
$("#changeTo2").click(function() { 
    var newData = { fruitId: "2" }; 
    ko.applyBindings(new ViewModel(newData)); 
}); 

Answer 1

이제 Knockout-Kendo 라이브러리 대신 Knockout 구독을 사용하게되었습니다. 구독 기능 내 UI의 드롭 다운 값을 설정합니다.

메모리의 ViewModel과 동일한 인스턴스를 유지하기 위해 위 코드를 변경해야했습니다. 각 버튼 클릭시 새 ViewModel()을 가져 오는 것은 변경/가입 코드가 실행되지 않았 음을 의미합니다.

Answer 2

당신은 라이언 메이어의 녹아웃 KendoUI 바인딩 http://rniemeyer.github.com/knockout-kendo/web/DropDownList.html를 사용해야합니다.