2

ノックアウト kendo.js を使用して、ノックアウト forEach テンプレートで剣道ドロップダウン リスト コントロールを宣言しようとしています。これにより、新しい項目がノックアウト監視可能配列に追加されると、新しい剣道ドロップダウン リストが UI にレンダリングされます。

最初に、ドロップダウンリストの選択した値を、ドロップダウンリストの指定された「データ」配列内のエントリ オブジェクト全体にバインドできないことに気付きました。

この問題を克服するために、次のスレッドで RP Niemeyer の提案に従いました: Set the binding of a dropdown in knockout to an object

これですべて動作します。偉大な。

私の問題は、テンプレートに 2 番目のドロップダウン リストを追加しようとするときです。データは、計算されたオブザーバブルから返されるオブジェクトの配列プロパティにバインドされます...生徒、2 番目は、1 番目のドロップダウン リストで現在選択されている生徒のすべてのクラスを表示し、3 番目は、2 番目のドロップ ダウン リストで現在選択されているクラスのすべてのテストの成績を表示します。....)

私の問題を示すために、RP Niemeyer の元のフィドルに基づいてフィドルを作成しました。

オリジナルフィドル (RP Niemeyer's)

私のフィドル・ウィズ・イシュー

以下の行をフィドルに追加しました。

HTML:

<input data-bind="kendoDropDownList: { dataTextField: 'caption', dataValueField: 'id', data: selectedChoice().shapes, value: selectedShapeId }" />

JS:

this.choices = ko.observableArray([
        { id: "1", name: "apple", shapes: ko.observableArray([ { id: "5", caption: "circle" }, { id: "6", caption: "square" }]) },
        { id: "2", name: "orange", shapes: ko.observableArray([ { id: "5", caption: "circle" }]) },
        { id: "3", name: "banana", shapes: ko.observableArray([ { id: "5", caption: "circle" }, { id: "6", caption: "square" }, { id: "7", caption: "triangle" }]) }
    ]);

繰り返しになりますが、最初のドロップダウン リストで選択を変更すると (selectedId が変更され、selectedChoice が変更される)、UI 要素が「selectedChoice」または selectedChoices のプロパティにバインドされ、それらのバインディングが再設定されると予想していました。 -評価され、UI がそれぞれ更新されました。

何か不足していますか？または、この「ドロップ ダウン リストの連鎖」動作を実現するためのより良い方法はありますか (ノックアウト テンプレートと剣道ドロップ ダウン リスト コントロールを使用しながら)?

4

2 に答える 2

4

アドバイスをさせてください。オブザーバブルの値のプロパティにアクセスしないようにしてください。ご覧のとおり、依存関係の検出は常に依存関係を検出できるとは限りません。アクセスを行う計算オブザーバブルを作成する必要があります。

var ViewModel = function () {
    // ...

    this.selectedChoice = ko.computed(function () {
        var id = this.selectedId();
        return ko.utils.arrayFirst(this.choices(), function(choice) {
           return choice.id ===  id;
        });
    }, this);
    this.selectedChoiceShapes = ko.computed(function () {
        var selectedChoice = this.selectedChoice();
        return selectedChoice && selectedChoice.shapes;
    }, this);
}

次に、バインディングは次のようになります。

<input data-bind="kendoDropDownList: {
                      dataTextField: 'name',
                      dataValueField: 'id',
                      data: choices,
                      value: selectedId }" />
<input data-bind="kendoDropDownList: {
                      dataTextField: 'caption',
                      dataValueField: 'id',
                      data: selectedChoiceShapes,
                      value: selectedShapeId }" />

更新されたフィドル

于 2013-03-26T16:38:06.880 に答える
2

これは、ノックアウトを使用した剣道の欠点のようです。Kendo が評価selectedChoice().shapesするとき、式全体を保持するのではなく、見つけた配列を保持します。その特定の配列をオプションで更新すると、2 番目のドロップダウンにそれらが表示されます。問題は、更新時にKendo がデータを新しい配列selectedChoiceに再評価しないことです。shapesこの動作は、この fiddleで確認できます。

JS コンソールを開き、コンテキストをフィドルに設定します (デフォルトでtop frameは Chrome の に設定され、次のコマンドを実行します:

window.vm.choices()[1].shapes.push({"id": "6", "caption" : "Thing"})

そして、2 番目のドロップダウンの更新が表示されます。最初のドロップダウンを変更しても効果はありません。このフィドルKnockout without kendo では、式全体が再評価され、2 番目のオプションが適切に更新されていることがわかりselectます。

于 2013-03-26T16:10:38.063 に答える