當用戶在SlickGrid中選擇五個或更多項目時啓用按鈕

Question

我有一個SlickGrid用戶可以使用CheckboxSelectColumn插件選擇行。

我有一個HTML按鈕，我想data-bind提交按鈕，一旦用戶選擇了五排或禁用按鈕，如果他們取消足夠的行到少於五個檢查僅僅是可見的。

<button data-bind="click: submit, enable: hasSelectedFivePolicies">Submit</button> 

在我的挖空腳本中，我創建了一個observable，它在頁面首次加載時將按鈕設置爲禁用。但是，一旦用戶選擇了五個或更多項目，則該按鈕未啓用。

一旦用戶檢查了SlickGrid中的五個或更多項目，我該如何啓用按鈕？

function ViewModel() { 
      var self = this; 

      var hasFive = gridUnredeemed.getSelectedRows().length >= 5; 
      self.hasSelectedFivePolicies = ko.observable(hasFive); 

      self.getCheckedItems = function() { 
       // get the selected stuff 
       console.log("Getting checked items..."); 
       var selectedData = [], selectedIndexes; 

       selectedIndexes = gridUnredeemed.getSelectedRows(); 
       $.each(selectedIndexes, function (index, value) { 
        var stuff = gridUnredeemed.getData()[value]; 
        selectedData.push(stuff); 
        console.log(stuff); 
       }); 
       return selectedData; 
      } 

      self.getSelectedPolicyNumbers = function() { 
       var items = self.getCheckedItems(); 
       var policyNumbers = []; 
       $.each(items, function() { 
        $.each(this, function (name, value) { 
         if (name === "PolicyNumber") policyNumbers.push(value); 
        }); 
       }) 
       return policyNumbers; 
      } 

      self.getSelectedPolicies = function() { 
       var items = self.getCheckedItems(); 
       var policies = []; 
       $.each(items, function() { 
        policies.push(new policyToRedeem(this.PolicyNumber, this.IssueDate, this.InsuredName, this.PolicyStatus, this.PolicyType)); 
       }); 

       return policies; 
      } 

Answer 1

以下行：

var hasFive = gridUnredeemed.getSelectedRows().length >= 5; 

是不夠的，讓淘汰賽創建getSelectedRows()和hasSelectedFivePolicies觀察到之間的依賴關係。

不僅如此，即使創建了依賴關係，它仍然不夠，因爲當getSelectedRows更改時，Knockout不會得到通知。

您需要手動訂閱onSelectedRowsChanged事件，並相應地更改hasSelectedFivePolicies可觀察值。

例如（假設gridUnredeemed是參考你的網格實例）：

gridUnredeemed.onSelectedRowsChanged.subscribe(function(e) { 
    var hasFiveRecalc = gridUnredeemed.getSelectedRows().length >= 5; 
    self.hasSelectedFivePolicies(hasFiveRecalc); 
});