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

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

  1. カテゴリは最初のドロップダウンから選択します(フルーツ、ミート、ドリンクなど)。

  2. 最初の選択肢から2番目のドロップダウンが自動的に入力されます。しかし、果物(リンゴ、オレンジなど)には2つのマッチがあり、肉(牛肉、ラム)には2つあり、飲み物には数多くの選択肢があります(数百)。

  3. 私のページは現在、選択したカテゴリに応じて検索ボックスを表示します。

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
お返事をありがとうございます。私はおそらくそれほど明確ではありませんでした。私がviewmodelでやろうとしているのは、選択した値= Appleの場合です。これは、選択した値=飲み物なら、これを実行します。
追加された 著者 Jules Wensley,
申し訳ありませんが、選択した値=果物 - これを行います。選択した値=飲み物 - 何か他の操作
追加された 著者 Jules Wensley,
どのように現在あなたのドロップダウンをviewmodelにバインドしていますか?あなたはコードを投稿できますか?通常、ビューモデル内のオブジェクト(つまり、配列)にドロップダウンをバインドします。配列が更新されると、ドロップダウンが更新されます。たとえば、最初のドロップダウンはarrayCategoryにバインドされ、2番目のドロップダウンはarraySubCategoryにバインドされます。カテゴリを選択するときは、viewmodelのarraySubCategoryオブジェクトを更新すると仮定しています。 2回目のドロップダウンで新しいサブカテゴリが自動的に表示されます。
追加された 著者 Nope,
observableArraysのこのarticel( knockoutjs.com/documentation/observableArrays.html )は、配列の操作方法を示しています。本質的には、配列を更新してデザインタイムにドロップダウンにバインドすることだけが心配です。
追加された 著者 Nope,

1 答え

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

メソッド例:

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()を書いていますが、これは単に項目が文字列として渡されたと仮定したことです。この構文は明らかにあなたのドロップダウンをどのように宣言して入力したかに応じて変更する必要がありますが、本質的には、変更イベント、または任意の他のイベントにバインドできるビューモデルにメソッドを書き込むことができます。

1
追加された
おかげでフランソワ、私はこれで遊び、あなたに戻ってきます。
追加された 著者 Jules Wensley,
ありがとう、フランソワ。あなたは私を正しい軌道に乗せました。
追加された 著者 Jules Wensley,
それが役に立てば幸い。 Fruit または Drinks に応答して何をしたいかに応じて、選択に基づいて変更した観察可能なプロパティを追加してビューモデルを拡張し、変化に対応する必要があります。たとえば、 searchIsVisible:ko.observable(false)など、必要に応じて true または false に設定できます。 searchIsVisible プロパティを検索コントロールと幸せな日の visible バインディングにバインドします。
追加された 著者 Nope,