Включить кнопку, когда пользователь выбрал пять или более элементов в SlickGrid

Question

У меня есть SlickGrid, где пользователи могут выбирать строки, используя плагин CheckboxSelectColumn.

У меня есть кнопка html, где я хочу data-bind кнопка «Отправить», чтобы она была видна только после того, как пользователь выбрал пять строк или отключил кнопку, если они снижают количество строк до тех, где проверено менее пяти.

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

В моем скрипте нокаута я создал наблюдаемый, который устанавливает кнопку для отключения при первой загрузке страницы. Однако, как только пользователь выбрал пять или более элементов, кнопка не включена.

Как включить кнопку, когда пользователь проверил пять или более элементов в 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 наблюдаемой.

Не только это, даже если была создана зависимость, все равно этого было бы недостаточно, потому что Knockout не получал бы уведомление при изменении getSelectedRows.

Вам необходимо вручную подписаться на событие onSelectedRowsChanged и соответствующим образом изменить наблюдаемое значение hasSelectedFivePolicies.

Например (в предположении gridUnredeemed является ссылка на экземпляр сетки):

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