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

Question

Mvcのさまざまなアクションから取り込まれたノックアウトビューモデルがあります。

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

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

3. マイページには、現在選択されているカテゴリに応じて検索ボックスが表示されます。

私は自動的にフルーツ&肉のための2番目のドロップダウンをバインド、または検索クエリの結果からバインドを待って行う方法を疑問に思いました。

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

ありがとうございます。

Answer 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: 
     } 
    } 
}; 

このような方法には、その後バインドできあなたのドロップダウン：ここに述べたように

<select id="FirstDropDown" data-bind="options: myViewModel.firstDropDownArray, <any other binding options>, event: {change: myViewModel.validateSelection(currentItem)}"> 
</select> 

：event-binding、

あなたのハンドラを呼び出して、ノックアウト現在のモデル の値を最初のパラメータとして供給します。

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