当用户在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); 
});