ノックアウトで兄弟イベントを停止する

Question

さまざまな列のヘッダーにソートが適用された表があります。

1つの列の並べ替えが進行中で、同じ時間に他の列の並べ替えがユーザーによってクリックされた場合。 適切に短絡しても動作しません。

<div class="table-col"> 
    Title 
    <a href="#" class="image_rght" data-bind="click: function(data,event){app.viewModel.sort('Title')},css:{noclass: app.viewModel.sortBy()=='' && app.viewModel.sortDirection(),toggleup:app.viewModel.sortBy()=='Title'&& app.viewModel.sortDirection(),toggledown:app.viewModel.sortBy()=='Title'&& !app.viewModel.sortDirection()}"><img src="~/Content/images/up_down_arrow.png" /></a> 
</div> 
<div class="table-col"> 
    Date 
    <a href="#" class="image_rght" data-bind="click: function(data,event){app.viewModel.sort('StartDate')}, css:{toggleup:app.viewModel.sortBy()=='StartDate'&& app.viewModel.sortDirection(),toggledown:app.viewModel.sortBy()=='StartDate'&& !app.viewModel.sortDirection()}"><img src="/Content/images/up_down_arrow.png" /></a> 
</div> 
<div class="table-col"> 
    Facility 
    <a href="#" class="image_rght" data-bind="click: function(data,event){app.viewModel.sort('FacilityName')}, css:{toggleup:app.viewModel.sortBy()=='FacilityName'&& app.viewModel.sortDirection(),toggledown:app.viewModel.sortBy()=='FacilityName'&& !app.viewModel.sortDirection()}"><img src="/Content/images/up_down_arrow.png" /></a> 
</div> 

他の進行中/処理中にソートの他のイベントを停止したいです。例については

：ユーザーは、それが処理が完了していないのですとしてソートにタイトルをクリックすると、同じ時間、ユーザが日列をクリックしたタイトルのソートが完了していないまで、その後、日付列のイベントは、火災ではありません。

Answer 1

あなたはビュー内で多くのロジックを持っています。これは通常かなり複雑です。あなたのビューモデルにクリックハンドラを追加することから始めてください。更新を延期する必要があるかどうかを確認するために使用できることを確認できるisSortingを作成します。私は、異なるカテゴリにバインドされたイベントリスナーを作成するために、ヘルパーメソッドを使用してお勧めしたい

var self = this; 

self.sort = ko.observable("Title"); 
self.isSorting = ko.observable(false); 

self.onClick = function(sortBy) { 
    if (self.isSorting()) { 
    // Queue logic 
    } else { 
    self.sort(sortBy); 
    } 
}; 

：それは

は、最も基本的な形です。

self.sortHandlerFor = function(sortBy) { 
    return self.onClick.bind(self, sortBy); 
}; 

あなたがそうのように使用することができます

：たとえば

<a data-bind="click: sortHandlerFor('Title')"></a> 
<a data-bind="click: sortHandlerFor('StartDate')"></a> 

あなたは、アクティブ/パッシブ状態ロジックに同じアイデアを使用することができます計算trueまたはfalse経由を返すファクトリメソッドを作成しますビューの代わりにビューモデル。

sortジョブのキューロジックは、非同期コードに密接に関連しています。助けが必要な場合は、あなたの質問を編集してこの部分を追加することをお勧めします。