So erhalten Sie die ausgewählten Elemente des Kontrollkästchens mit Knockout

Question

<div id="title" data-bind="foreach: list"> 
      <input type="checkbox" data-bind="attr:{id: $index,value: list.id}" class="k-checkbox"> 
      <label class="k-checkbox-label" data-bind="attr:{for: $index},checked: myFunction(this),text: list.id"></label> 
      </div> 
      <span data-bind="text: elementsSelected"></span> 
     </div> 

myFunction überprüfen, ob ich das Kontrollkästchen aktiviert habe. In elementsAusgewählt möchte ich die Elemente aus 'Liste' ausgewählt bekommen. Dann drucke ich dieses Array in die Spannweite.

Answer 1

Sie können ko.pureComputed verwenden, um die Daten basierend auf Ihrer Bedingung anzuzeigen. Hier

ein Beispiel:

var simpleListModel = function(id, item) { 
 
    var self = this; 
 
    self.id = ko.observable(id); 
 
    self.item = ko.observable(item); 
 
    self.isSelected = ko.observable(false); 
 
    self.printItem = ko.pureComputed(function() { 
 
    if(self.isSelected()) return self.id() + " " + self.item(); 
 
    else return ""; 
 
    }, this); 
 
}; 
 

 
var masterVM = (function() { 
 
    var self = this;  
 
    self.lists = ko.observableArray(); 
 
    
 
    for(var i = 0; i<5; i++) { 
 
    self.lists.push(new simpleListModel(i, "Item No. " + i)); 
 
    } 
 
})(); 
 

 
ko.applyBindings(masterVM);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: lists"> 
 
    <div> 
 
    <span>Check to show the item: </span> 
 
    <input type="checkbox" data-bind="checked: isSelected" /> 
 
    <span data-bind="text: printItem"></span> 
 
    </div> 
 
</div>