Javascript 击倒视图模型更新时，剑道UI下拉列表未更新

我有一个剑道UI下拉列表，当它绑定到的击倒视图模型发生更改时，它不会更新它的UI。我可以得到一个纯HTML选择和一个纯文本框来显示新的模型值，但不能得到剑道UI。我忽略了什么

这是一个代码示例（和）。果肉最初应该是“2”（橙色），然后是按钮点击后的“3”（香蕉）。文本框和两个下拉列表绑定到敲除视图模型（FROUTID）中的相同值

当手动更改剑道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>

---

你应该使用Ryan Niemeyer的击出剑道绑定。

你应该使用Ryan Niemeyer的击出剑道绑定。

我现在使用的是击出订阅，而不是击出剑道库。我在订阅函数的UI中设置了下拉值

---

我还必须更改上面的代码，以便在内存中保留ViewModel的相同实例。每次单击按钮都会得到一个新的ViewModel（），这意味着更改/订阅代码没有触发。

我现在使用的是淘汰订阅，而不是淘汰剑道库。我在订阅函数的UI中设置了下拉值

---

我还必须更改上面的代码，以便在内存中保留ViewModel的相同实例。每次单击按钮都会得到一个新的ViewModel（），这意味着更改/订阅代码不会触发。

我知道这个库，但我想用它作为最后手段。当KO模型更改时，是否没有简单的方法更新剑道UI下拉列表的UI以显示正确的值？不，击倒只是操纵DOM。KendoUI库（与任何其他UI组件一样）侦听各种DOM事件以供用户输入，但除非定期检查，否则它无法检测DOM更改，这是完全不必要的。我知道这个库，但我考虑将其用作最后手段。当KO模型更改时，是否没有简单的方法更新剑道UI下拉列表的UI以显示正确的值？不，击倒只是操纵DOM。KendoUI库（与任何其他UI组件一样）侦听各种DOM事件以供用户输入，但除非定期检查，否则它无法检测DOM更改，这完全是不必要的。

// 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));
});