ノックアウトを使用してループ内のドロップダウンイベントを取得する

Question

サンプルコード ここに、顧客の詳細をページに表示する必要があります。 UIの単一のレコードではなく、顧客の詳細を表示しています。各顧客について、私は表に詳細を表示しようとしています。各顧客テーブルで私はページネーションを表示する必要があります。以下は、各顧客を表示するためのサンプルコードです。ページ設定には、前のボタンにドロップダウンと次のボタンがあります。ドロップダウンの値が変更されたとき、私はその特定の顧客の次のセットを表示する必要があるので。問題は、私は各ループのためにノックアウトでドロップダウンイベントを取得することができないです。

<ul class="pager"> 
    <li><span> 
     <input type="button" class="btn dsg-back-btn" value="" title="Previous Page"> 
    </span></li> 
    <li><span> 
     <select class="queueQuery" data-bind="options: TablePageSize, optionsText: 'PageId', optionsValue: 'QueueId', optionsCaption: 'Select'"> 
     <option value="">Select</option> 
     <option value="b66bc105-337c-4e5c-aead-6493a3ace358">1</option> 
     <option value="b66bc105-337c-4e5c-aead-6493a3ace358">2</option> 
     <option value="b66bc105-337c-4e5c-aead-6493a3ace358">3</option> 
     </select></span></li> 
    <li><span> 
     <input type="button" class="btn btn-sm dsg-next-btn" value="" title="Next Page"></span></li> 
    </ul> 

Answer 1

私が正しく理解している場合、選択リストの値が変更されたときに顧客の詳細リストを更新する必要があります。観察可能なプロパティを持つ選択リストのバインドを使用して、そのオブザーバブルにサブスクライブすると、ドロップダウンの変更を取得し、ビューモデルで新しいデータをロードする方法が得られます。

JS：

var val = ko.observable(); 
val.subscribe(function (newVal) { 
    // load new data into observable array bound to your list view 
}); 

HTML：

<select class="queueQuery" data-bind="options: TablePageSize, optionsText: 'PageId', optionsValue: 'QueueId', optionsCaption: 'Select', value: val">