Knockout Checkboxen mit Typoskript

Question

Kontext: Ich habe eine Tabelle mit einer Liste von Schecks. Jede Überprüfung hat ein Kontrollkästchen, und die Tabelle selbst hat oben das Kontrollkästchen "Alle auswählen". Der Zweck der Kontrollkästchen besteht darin, die Schecks auszudrucken.

Ich habe derzeit das Kontrollkästchen alle Kontrollkästchen aktivieren - es fügt alle Checks zu einem kouncebackable-Array von choosedChecks sowie die checkIDs zu einem CheckIDs-Array hinzu. Die Druckfunktion des Servers verwendet eine Liste von checkIDs.

Das Problem, das ich habe, ist mit dem Hinzufügen und Entfernen von einzelnen Prüfungen/checkIDs. Ich bin nicht sicher, wie Sie feststellen, ob die Check/checkID bereits im Array ist, und wenn ja, wie Sie es entfernen. Hier ist der Code, mit den Ansichten usw.

Haftungsausschluss: Ich könnte darüber nachdenken, wie ich alle meine Arrays eingerichtet habe.

Vielen Dank für Ihre Hilfe.

The View:

<table class="details_table" data-bind="visible: vendorChecks().length"> 
    <thead> 
     <tr> 
      <th>Check ID 
      </th> 
      <th>Check Date 
      </th> 
      <th>Vendor Name 
      </th> 
      <th>Check Amount 
      </th> 
      <th>Approve Status 
      </th> 
      <th> 
       <input type="checkbox" data-bind="checked: selectAllChecks" title="Select all/none"/> 
      </th> 

     </tr> 
    </thead> 
    <tbody class="nohighlight" data-bind="foreach: $root.vendorChecks"> 
     <tr> 
      <td><span data-bind="text: $data.CheckID"></span></td> 
      <td><span data-bind="text: CheckDate"></span></td> 
      <td><span data-bind="text: VendorName"></span></td> 
      <td><span data-bind="text: FormatCurrency(CheckAmount())"></span></td> 
      <td><span data-bind="text: Globalize.formatCheckRunApproveStatus(ApprovalStatusID())"></span></td> 
      <td> 
       <input type="checkbox" class="print_line_checkbox" data-bind="checkedValue: $data, checked: $root.chosenChecks(), click: $root.addCheck"/> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Typoskript:

class SearchPrintedChecksModel { 
    public checkRuns = ko.observableArray<CheckRunModel>(null); 
    public bankDrafts = ko.observableArray<BankDraftInfoModel>(null); 
    public vendorChecks = ko.observableArray<BankDraftInfo>(null); 
    public isSelectedCheck = ko.observable(false); 
    public chosenChecks = ko.observableArray<BankDraftInfo>(null); 
    public checkIDs = ko.observableArray(); 

    public addCheck(checkIDs) { 
     var checks = printModel.chosenChecks(); 
     const CheckIDs = checkIDs; 
     for (var i in checks) { 
      checkIDs.push(checks[i].CheckID); 
      ??? 
     } 
    } 
    public selectAllChecks = ko.pureComputed({ 
     read: function() { 
      return this.chosenChecks().length === this.vendorChecks().length; 
     }, 
     write: function(value) { 
      this.chosenChecks(value ? this.vendorChecks.slice(0) : []); 
      const checks = printModel.chosenChecks(); 
      const checkIDs = printModel.checkIDs(); 
      for (let i in checks) { 
       if (checks.hasOwnProperty(i)) { 
        printModel.checkIDs.push(checks[i].CheckID); 
       } 
      } 
      this.addCheck(checkIDs); 
     }, 
     owner: this 
    }); 

} 


$(document).ready(() => { 
    ko.applyBindings(printModel); 
}); 

Answer 1

Anstatt die Fehler in der Logik zu finden, würde ich in eine etwas andere Struktur vorschlagen, Blick:

• Setzen Sie eine checked in jedem der Objekte beobachtbar. Verwenden Sie dieses Observable in der Datenbindung checked.
• Erstellen Sie eine computed mit einer read und write Methode im übergeordneten Ansichtsmodell.
  • Die read Funktion überprüft, ob alle Artikel
  • Die write Funktion übergibt den geschriebenen Wert zu jeder Artikel

Hier ist, was der Code aussehen würde geprüft werden:

function ViewModel() { 
 
    
 
    this.items = [ 
 
    { id: 1, checked: ko.observable(false) }, 
 
    { id: 2, checked: ko.observable(false) }, 
 
    { id: 3, checked: ko.observable(false) }, 
 
    { id: 4, checked: ko.observable(false) }, 
 
    ]; 
 
    
 
    this.allChecked = ko.computed({ 
 
    read: function() { 
 
     return this.items.every(function(item) { 
 
     return item.checked(); 
 
     }); 
 
    }, 
 
    write: function(value) { 
 
     this.items.forEach(function(item) { 
 
      item.checked(value); 
 
     }); 
 
    } 
 
    }, this); 
 
} 
 
    
 
ko.applyBindings(new ViewModel());

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

 
<label> 
 
    <input type="checkbox" data-bind="checked: allChecked"> 
 
    all 
 
</label> 
 
<ul data-bind="foreach: items"> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" data-bind="checked: checked"/> 
 
     <span data-bind="text: 'Item ' + id"></span> 
 
    </label> 
 
    </li> 
 
</ul>