Typescriptを使用したノックアウトチェックボックス

Question

コンテキスト：私はチェックリストを持つテーブルを持っています。各チェックにはチェックボックスがあり、テーブル自体には上部に「すべて選択」チェックボックスがあります。チェックボックスの目的は、小切手を印刷することです。

私は現在、select allチェックボックスを有効にしています。すべてのチェックをselectedChecks ko.observable配列に加え、checkIDsをCheckIDs配列に追加します。サーバーのprint関数は、checkIDのリストを使用します。

個別のチェック/チェックIDの追加と削除が問題です。チェック/チェックIDが既にアレイにあるかどうかを判断する方法がわかりません。

免責事項：私はすべての配列をどのように設定したのか考えているかもしれません。

ご協力いただきありがとうございます。

ビュー：

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