Knockout.js Impossible de cocher la case à cocher dynamiquement

Question

Je travaille sur mon premier projet KO et je constate que je ne peux pas cocher les cases quand elles ont été ajoutées dynamiquement à la page. J'ai essayé le code de démonstration du site KO et par lui-même cela fonctionne très bien, mais ma mise en œuvre ne fonctionne pas. Le résultat ne lie pas 'vérifié' ni mon feu d'alerte. L'état des boîtes ne changent pas lorsque je clique sur eux et il n'y a aucune erreur javascript ..

<div class="report"> 
<label>start date</label> 
<input type="text" id="date-from" data-bind="value: startDate" /> 
<span>to </span> 
<input type="text" id="date-to" data-bind="value: endDate" /> 
<label>product code</label> 
<input type="text" id="product-code" data-bind="value: productCode" /> 
<label>lead type</label> 
<select id="lead-type" data-bind="value: leadType"> 
    <option value="0" selected="selected">all</option> 
    <option value="B">sales</option> 
    <option value="Q">enquiries</option> 
    <option value="F">failed purchases</option> 
    <option value="C">cancelled purchases</option> 
</select> 
<input type="submit" id="submit-query" class="button" data-bind="click: load" value="Go"/> 

Date de Prefix Prénom Nom Pays Date de naissance Téléphone Email mondial complet

$(document).ready(function() { 
    var reportsViewModel = function() { 
     var self = this; 
     self.startDate = ko.observable(); 
     self.endDate = ko.observable(); 
     self.productCode = ko.observable(); 
     self.leadType = ko.observable(); 
     self.wantsSpam = ko.observable(true); 
     self.alert = function() { 
      alert(self.isActioned()); 
     }; 

     var queryData = { 
      startDate: self.startDate, 
      endDate: self.endDate, 
      productCode: self.productCode, 
      isActioned: false, 
      leadType: self.leadType 
     }; 

     function orderModel(item) { 
      this.OrderDate = ko.observable(item.OrderDate), 
      this.Prefix = ko.observable(item.Prefix), 
      this.FirstName = ko.observable(item.FirstName), 
      this.LastName = ko.observable(item.LastName), 
      this.Country = ko.observable(item.Country), 
      this.DateofBirth = ko.observable(item.DateofBirth), 
      this.Telephone = ko.observable(item.Telephone), 
      this.CustEmail = ko.observable(item.CustEmail), 
      this.gbac = ko.observable(item.gbac), 
      this.isActioned = ko.observable(true) 
     }; 

     self.reportItems = ko.observableArray([]); 

     self.load = function() { 
      $.ajax({ 
       url: sf.getServiceRoot('CC_Reporting') + "Report/getLeads", 
       type: "POST", 
       data: queryData, 
       beforeSend: sf.setModuleHeader 
      }).done(function (data, status) { 
       if (data == "There are no records which match your search.") { 
        alert(data); 
        return; 
       } else { 
        self.reportItems.removeAll(); 
        $.each(data, function (i, item) { 
         console.log(item); 
         self.reportItems.push(new orderModel(item)); 
        }); 
       } 
      }).fail(function (data) { 
       alert(data); 

      }); 
     } 


    }; 

    ko.applyBindings(new reportsViewModel()); 

});

Answer 1

Vous avez plusieurs erreurs dans votre code. Tout d'abord, comme je l'ai mentionné, avoir un attribut id sur un nœud DOM dans une boucle est illégal.

Deuxièmement, votre liaison click est à l'intérieur de la liaison foreach, donc son contexte est le orderModel, mais la fonction est sur le parent. Utilisez click: $parent.alert pour appeler la bonne fonction.

Troisièmement, vous alert fonction recherche self pour la propriété isActioned, lorsque cette propriété est sur l'élément. Utilisez un paramètre sur votre fonction pour saisir le contexte d'appel, comme ceci:

self.alert = function (item) { 
     alert(item.isActioned()); 
     return true; 
    }; 

Quatrièmement, notez le return true. Sans cela, l'événement click mange le clic, l'empêchant de décocher la case, ce qui ne veut pas se produire. renvoyer les vraies causes Knockout pour laisser l'événement bulle. Enfin, rien n'appelle le self.load() pour que votre ajax ne se déclenche jamais. Voici the working fiddle, réduit un peu.