1

Kendo UI ドロップダウンがあり、Knockout ビュー モデルが変更されたときに UI が更新されません。新しいモデルの値を表示するためのプレーンな HTML 選択とプレーン テキスト ボックスを取得できますが、Kendo UI の値は取得できません。私は何を見落としていますか？

コードサンプル (およびJSFiddle ) を次に示します。fruitId は、最初は「2」(オレンジ) で、ボタンのクリック後は「3」(バナナ) になります。テキスト ボックスと 2 つのドロップダウンは、Knockout ビュー モデル (fruitId) で同じ値にバインドされます。

Kendo UI ドロップダウンが手動で変更されると、Knockout ビュー モデルが更新され、プレーン ドロップダウンとテキスト ボックスに新しい値が表示されます。しかし、ボタンがクリックされ、ビュー モデルがコードで更新されると、テキスト ボックスとプレーン ドロップダウンには正しい値が表示されますが、Kendo 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>

JavaScript

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

2 に答える 2

1

Ryan Niemeyer の Knockout KendoUI バインディングhttp://rniemeyer.github.com/knockout-kendo/web/DropDownList.htmlを使用する必要があります。

于 2013-02-01T08:13:30.960 に答える
0

私は今のところ、Knockout-Kendoライブラリの代わりにKnockoutサブスクリプションを使用することになりました。サブスクリプション関数内のUIでドロップダウン値を設定しました。

また、ViewModelの同じインスタンスをメモリに保持するために、上記のコードを変更する必要がありました。ボタンをクリックするたびに新しいViewModel（）を取得するということは、変更/サブスクリプションコードが実行されなかったことを意味します。

于 2013-02-02T20:39:35.173 に答える