javascript - 使用 Typescript knockout 复选框

Question

上下文:我有一个包含支票列表的表格。每个检查都有一个复选框，并且表格本身在顶部有一个“全选”复选框。复选框的目的是打印支票。

我目前使全选复选框正常工作 - 它将所有检查添加到 selectedChecks ko.observable 数组，并将 checkID 添加到 CheckIDs 数组。服务器的打印功能使用 checkID 列表。

我遇到的问题是添加和删除单个检查/checkID。我不确定如何确定检查/checkID 是否已经在数组中，如果是，如何删除它。这是代码，以及 View 等。

免责声明:我可能在如何设置所有数组时过度思考了这一点。

感谢您的帮助。

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>

typescript :

 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 observable。在checked数据绑定(bind)中使用此可观察量。
• 在父 View 模型中使用 read 和 write 方法创建一个计算。
  • 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>