Activer le bouton lorsque l'utilisateur a sélectionné cinq éléments ou plus dans SlickGrid

Question

J'ai un SlickGrid où les utilisateurs peuvent sélectionner des lignes en utilisant le plugin CheckboxSelectColumn.

J'ai un bouton html où je veux data-bind le bouton Soumettre n'est visible que lorsque l'utilisateur a sélectionné cinq lignes ou désactiver le bouton s'il décoche suffisamment de lignes pour que moins de cinq soient cochées.

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

Dans mon script KO, j'ai créé une observable qui définit le bouton sur désactivé lors du chargement de la page. Cependant, une fois que l'utilisateur a sélectionné cinq éléments ou plus, le bouton n'est pas activé.

Comment activer le bouton une fois qu'un utilisateur a coché cinq éléments ou plus dans 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

La ligne suivante:

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

ne suffit pas de faire Knockout créer une dépendance entre getSelectedRows() et l'hasSelectedFivePolicies observable. De plus, même si une dépendance a été créée, elle ne suffirait pas car Knockout ne serait pas averti lorsque getSelectedRows est modifié.

Vous devez vous abonner manuellement à l'événement onSelectedRowsChanged et modifier la valeur observable hasSelectedFivePolicies en conséquence.

Par exemple (en supposant gridUnredeemed est la référence à votre instance de grille):

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