淘汰赛检查表列中的所有复选框 在 isSelected 级别有一个 Document 布尔值在 selectedDocuments 级别维护一个 DocumentsViewModel 可观察的文档数组其他注意事项

如何解决淘汰赛检查表列中的所有复选框 在 isSelected 级别有一个 Document 布尔值在 selectedDocuments 级别维护一个 DocumentsViewModel 可观察的文档数组其他注意事项

我是淘汰赛的新手，并试图实现一个以第一列作为复选框的表格。当我单击标题时，应选中/取消选中整个列。目前，当我单击表格行（所有行都被选中/取消选中）但不在表格标题上时，它可以工作。请让我知道我的代码有什么问题！这是我的部分代码：

        <table>
            <tr>
                <th><input type="checkBox" data-bind="click: selectAll"></th>
                <th>Notes</th>
            </tr>
        
            <tbody data-bind="foreach: DocumentRows">
                <tr>
                    <td><input type="checkBox" data-bind="checked: $parent.IsSelected"></td>
             <td><data-bind="text: Notes"></td>
</tr>
            </tbody>
        </table>
        
       // Script.ts
        
        ```
        define(['knockout','jquery','text!./Template'],(ko,$,htmlString) => {
        //Document
        class Document {
                Id: KnockoutObservable<number>;      
                Notes: KnockoutObservable<string>;        
                constructor(data?) {
                    this.Id = ko.observable(0);          
                    this.Notes = ko.observable("").extend({ defaultValue: "" });            
                    if (data != null) {
                        ko.mapping.fromJS(data,{},this);
                    }
                }        
            };
        
        
        //DocumentS VIEW MODEL
        class Documentsviewmodel {
        DocumentRows: KnockoutObservableArray<Document>;
        IsSelected: KnockoutObservable<boolean>;
               
        constructor(params) {
        this.DocumentRows = ko.observableArray([]);
        this.IsSelected = ko.observable(false);//
        this.InitComputed();       
               this.Load();
        }
        InitComputed = () => {
        selectAll = (Document: Documentsviewmodel) => {      
                    var doc = Document.DocumentRows;           
                    ko.utils.arrayForEach(doc(),function (item) {
                        item.IsSelected(true);
                    });
                }
        
        Load = () => {
                    DocumentsApiService.GetDocumentList(this);
                }
        
        }
        
        //API SERVICE
        class DocumentsApiService {
                static GetDocumentList = (model: Documentsviewmodel) => {
                    $.ajax({
                        url: buildUrl(model.LoadListURL,{ 'id': model.ObjectId(),'additionalId': model.AdditionalId() }),type: 'POST',data: ko.mapping.toJSON(model.Filter),contentType: 'application/json; charset=utf-8'
                    }).done(allData => {
                        var mapped = ko.mapping.fromJS(allData,DocumentsMapping);
                        model.DocumentRows(mapped.DocumentRows());
                        model.Filter.TotalCount(mapped.TotalCount());
                        model.Filter.PageIndex(mapped.Filter.PageIndex());
                        CalcCountTableStatus(model.Filter.PageIndex(),model.Filter.PageSize(),model.Filter.TotalCount(),'documents-count-status-line');
                    }).fail(data => {
                        Tscore.OnFailure(data);
                    });
                }
        }
        
            return { viewmodel: Documentsviewmodel,template: htmlString }
        });
        ```

解决方法

在实现这样的选择功能时，通常有两种方法。

在 isSelected 级别有一个 Document 布尔值

将 isSelected observable 放在 Document 模型上，而不放在 DocumentsViewModel 上，因为每个文档都必须保存信息，无论它是否被选中。

我猜您正在尝试实施这种方法，但乍一看，您没有将 IsSelected 放在正确的位置。此外，如果您将 IsSelected 移至文档，则在您的视图中不要使用 $parent.IsSelected，而仅使用 IsSelected。

在 selectedDocuments 级别维护一个 DocumentsViewModel 可观察的文档数组

通过这种方式，您可以拥有所有当前选定文档的可观察数组，并在选择所有文档时保持该数组（例如将所有行推送到选择中）

在您看来，您必须使用父引用来确定是否选择了类似于 $parent.selectedDocuments.indexOf($data) >= 0 的文档。

我现在不会涵盖这两种方法的所有优缺点，但如果您可以使用 IsSelected observable 扩展您的文档模型，我建议您使用第一种。

其他注意事项

目前还不清楚您想用 InitComputeds 实现什么目的。你为什么不把这些动作作为你的视图模型类的函数，比如

public selectAll(): void {      
    ko.utils.arrayForEach(this.DocumentRows(),function (item) {
        item.IsSelected(true);
    });
}

如果使用此语法，则必须在视图级别绑定函数，如 $data.selectAll.bind($data)。如果您不想要那样，而只想纯粹地 selectAll，那么您可以使用箭头函数作为这样的字段语法。

public selectAll = ():void => {
    ko.utils.arrayForEach(this.DocumentRows(),function (item) {
        item.IsSelected(true);
    });
}

希望我能给一些有价值的提示。

,

所以，更改后 表头：

<th><input type="checkbox" data-bind="click: selectAll,checked: selectedAll"></th>

表体：

 <td><input type="checkbox" data-bind="checked: IsSelected"></td>

脚本：

    //Document
class Document {
    Id: KnockoutObservable<number>;        
    IsSelected: KnockoutObservable<boolean>;
    constructor(data?) {
        this.Id = ko.observable(0);
        this.Notes = ko.observable("").extend({ defaultValue: "" });          
        this.IsSelected = ko.observable(false);
        if (data != null) {
            ko.mapping.fromJS(data,{},this);
        }
    }
};

//文档查看模型

     class DocumentsViewModel {
    selectedAll: KnockoutObservable<boolean>;
  constructor(params) {
 this.selectedAll = ko.observable(false);
}
 InitComputed = () => {
this.selectedAll = ko.pureComputed({
                read: function () {
                    return this.selectedIds().length === this.DocumentRows().length;
                },write: function (value) {
                    this.selectedIds(value ? this.DocumentRows.slice(0) : []);
                },owner: this
            }
     selectAll = (): void => {
                if (this.selectedIds().length > 0) {
                    this.selectedIds.removeAll();
                    ko.utils.arrayForEach(this.DocumentRows(),function (item) {
                        item.IsSelected(false);
                    });
                } else {
                    ko.utils.arrayPushAll(this.selectedIds(),this.DocumentRows())
                    ko.utils.arrayForEach(this.DocumentRows(),function (item) {
                        item.IsSelected(true);
                    });
                }
            }
    }

当所有行都被选中或未选中时，它不会显示要选中的标题。请问我哪里出错了？