ノックアウトjs - ドロップダウンリストで条件付きバインディングを行う方法

Question

ノックアウトjs - ドロップダウンリストで条件付きバインディングを行う方法

私は様々なMvcアクションから取り込まれたノックアウトビューモデルを持っています。

カテゴリは最初のドロップダウンから選択します（フルーツ、ミート、ドリンクなど）。
最初の選択肢から2番目のドロップダウンが自動的に入力されます。しかし、果物（リンゴ、オレンジなど）には2つのマッチがあり、肉（牛肉、ラム）には2つあり、飲み物には数多くの選択肢があります（数百）。
私のページは現在、選択したカテゴリに応じて検索ボックスを表示します。

I was wondering how to automatically bind the second dropdown for Fruit & Meat, or wait and do the bind from the results of the search query.

申し訳ありませんが、これは漠然としています。 KnockoutJsにはとても新しい。

前もって感謝します。

2

追加された 06 2月 2012 〜で 11:32 著者 Jules Wensley 編集された 06 2月 2012 〜で 11:37

ビュー: 6

源

ru fr es pt de ar

お返事をありがとうございます。私はおそらくそれほど明確ではありませんでした。私がviewmodelでやろうとしているのは、選択した値= Appleの場合です。これは、選択した値=飲み物なら、これを実行します。

追加された 06 2月 2012 〜で 11:56, 著者 Jules Wensley, 源

申し訳ありませんが、選択した値=果物 - これを行います。選択した値=飲み物 - 何か他の操作

追加された 06 2月 2012 〜で 12:05, 著者 Jules Wensley, 源

どのように現在あなたのドロップダウンをviewmodelにバインドしていますか？あなたはコードを投稿できますか？通常、ビューモデル内のオブジェクト（つまり、配列）にドロップダウンをバインドします。配列が更新されると、ドロップダウンが更新されます。たとえば、最初のドロップダウンはarrayCategoryにバインドされ、2番目のドロップダウンはarraySubCategoryにバインドされます。カテゴリを選択するときは、viewmodelのarraySubCategoryオブジェクトを更新すると仮定しています。 2回目のドロップダウンで新しいサブカテゴリが自動的に表示されます。

追加された 06 2月 2012 〜で 11:39, 著者 Nope, 源

observableArraysのこのarticel（ knockoutjs.com/documentation/observableArrays.html ）は、配列の操作方法を示しています。本質的には、配列を更新してデザインタイムにドロップダウンにバインドすることだけが心配です。

追加された 06 2月 2012 〜で 11:43, 著者 Nope, 源

1 答え

著者 Nope · Answer 1 · 2012-02-06T12:21Z

私があなたを正しく理解していれば、ドロップダウンの変更イベントにバインドするビューモデル内にメソッドを作成できます。

メソッド例：

var myViewModel = {
    firstDropDownArray: ko.observableArray([]),
    secondDropDownArray: ko.observableArray([]),

   //Validates Selection
    validateSelection: function (item) {
        var anotherList;

        switch (item.toUpperCase()) {
            case "FRUIT":
               //Do something...
                break;
            case "DRINKS":
               //Do something else...
                break;
            default:
        }
    }
};

ドロップダウンは次のようなメソッドにバインドできます：

ここに記載されているように：イベントバインディング、

ハンドラを呼び出すとき、Knockoutは現在のモデルを提供します値を最初のパラメータとして使用します。

これは、メソッドを呼び出すときに currentItem が選択されたアイテムになることを意味しています。私のサンプルコードでは、 item.toUpperCase（）を書いていますが、これは単に項目が文字列として渡されたと仮定したことです。この構文は明らかにあなたのドロップダウンをどのように宣言して入力したかに応じて変更する必要がありますが、本質的には、変更イベント、または任意の他のイベントにバインドできるビューモデルにメソッドを書き込むことができます。