使用打字稿的敲除複選框

Question

上下文：我有一個包含檢查列表的表。每張支票都有一個複選框，表格頂部有一個「全選」複選框。複選框的用途是打印檢查。

我目前有選擇所有複選框工作 - 它將所有檢查添加到selectedChecks ko.observable陣列以及CheckIDs到CheckIDs數組。服務器的打印功能使用checkID列表。

我遇到的問題是添加和刪除個別檢查/ checkID ..我不知道如何確定檢查/ checkID是否已經在數組中，如果是，如何刪除它。這裏的代碼，與意見等

聲明：我可能會在我如何設置我所有的陣列思考這個。

感謝您的幫助。

的觀點：

<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> 

打字稿：

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

而不是尋找在你的邏輯錯誤，我會建議尋找到一個稍微不同的結構：

• 將checked放在每個項目中都可觀察。在checked數據綁定中使用此可觀察值。
• 用父視圖模型中的read和write方法創建computed。
  • 如果所有項目檢查的read功能檢查
  • 的write函數傳遞寫入值每個項目

下面的代碼是什麼樣子：

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>