使用 KnockoutJS 时如何从表中删除选定的行

Question

我只是将可观察对象列表绑定到 html 表中的 TR。当用户选择一行时（只能选择一个），我希望从可观察数组中删除选定的行或可观察对象。我有删除工作，但它完全忽略了是否选择了行。我在每一行上使用一个标志来确定它们是否被选中，但该值始终为真......即使您取消选中该行上的复选框，这就是它将它们全部删除的原因。有人可以解释一下下面的淘汰赛设置吗……经过几天的研究和测试，但 KO 只是讨厌我:(

            <table class="accountGroups" id="tblAccountGroups">
            <tr>
                <td width="150px;" style="font-weight: bold;">StandardAccountNo</td>
                <td width="100px;" style="font-weight: bold;">Primary</td>
                <td style="font-weight: bold;">Effective Date</td>
                <td style="font-weight: bold;">End Date</td>
            </tr>
            <!-- ko foreach: NewAccountGroupDetails-->
            <tr id="Model.NewAccountGroupDetails[0].AccountGroupName" rowindex="$index()" class="acctgrp-row" data-bind="click: $root.selectedRow">
                <td>
                    <div>
                        <input type="text" data-bind="value: StandardAccountNo, attr: {name: 'NewAccountGroupDetails[' + $index() + '].StandardAccountNo'}" />
                    </div>
                </td>
                <td style="border:2px inset;border-color:gray;">
                    <div style="text-align:center;">
                        <input type="radio" data-bind="value: IsPrimary, attr: {name: 'NewAccountGroupDetails[' + $index() + '].IsPrimary'}" />
                    </div>
                </td>
                <td>
                    <div style="width:115px;">
                        <input type="text" data-bind="value: EffectiveDate, attr: {name: 'NewAccountGroupDetails[' + $index() + '].EffectiveDate'}" readonly="readonly" />
                    </div>
                </td>
                <td>
                    <div style="width:115px;">
                        <input type="text" data-bind="value: EndDate, attr: {name: 'NewAccountGroupDetails[' + $index() + '].EndDate'}" readonly="readonly" />
                    </div>
                </td>
                <td>
                    <input type="hidden" data-bind="value: ContractType, attr: {name: 'NewAccountGroupDetails[' + $index() + '].ContractType'}" />
                    <input type="hidden" data-bind="value: CompanyID, attr: {name: 'NewAccountGroupDetails[' + $index() + '].CompanyID'}" />
                    <input type="hidden" data-bind="value: AccountGroupName, attr: {name: 'NewAccountGroupDetails[' + $index() + '].AccountGroupName'}" />
                    <input type="checkbox" data-bind="checked: IsSelected, attr: {name: 'NewAccountGroupDetails[' + $index() + '].IsSelected'}" />
                </td>
            </tr>
            <!-- /ko -->
        </table>
    </div>
</div>
<br />
<div class="row">
    <div class="col-lg-2 col-sm-2">&nbsp;</div>
    <div class="col-lg-2 col-sm-2" style="text-align:right;">
        <input type="button" value="New" data-bind="click: addNew" />
    </div>
    <div class="col-lg-2 col-sm-2">
        <input type="button" value="Remove" data-bind="click: remove" />
    </div>
    <div class="col-lg-3 col-sm-2">&nbsp;</div>
    <div class="col-lg-2 col-sm-2">
        <input type="button" value="Save" id="btnSave" />
    </div>
</div>

JS

    $(document).on('ready', function () {
    ko.applyBindings(new AccountGroupViewModel());
});

     function AccountGroupViewModel() {
    var viewModel = this;

    //Convert Model property into observable array for KO
    var rawList = '@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.NewAccountGroupDetails))';
    viewModel.NewAccountGroupDetails = ko.observableArray(convertJSONToKoObservableObject($.parseJSON(rawList)));

    //Add properties to the vm and an empty ko object to the array
    viewModel.NewAccountGroupDetails.push(newAccountGroupDetail());

    viewModel.addNew = function () {
        viewModel.NewAccountGroupDetails.push(newAccountGroupDetail());
    }

    viewModel.remove = function (row) {
        viewModel.NewAccountGroupDetails.remove(function (item) {
            return item.IsSelected();
        });
    }
}

function convertJSONToKoObservableObject(json) {
    var ret = [];
    $.each(json, function (i, obj) {
        var newOBJ = {};
        for (prop in obj) {
            newOBJ[prop] = ko.observable(obj[prop]);
        }
        ret.push(newOBJ);
    });

    return ret;
}

function newAccountGroupDetail() {
    this.StandardAccountNo = ko.observable('');
    this.IsPrimary = ko.observable(false);
    this.EffectiveDate = ko.observable(new Date());
    this.EndDate = ko.observable(new Date());
    this.AccountGroupName = ko.observable($('#txtAccountGroupName').val());
    this.ContractType = ko.observable($('#ddlContractTypes').val());
    this.CompanyID = ko.observable($('#ddlCompany').val());
    this.IsSelected = ko.observable(false);
    return this;
}

Answer 1

这里有几个错误

viewModel.selectedDetails = ko.computed(function () {
        ko.utils.arrayForEach(viewModel.NewAccountGroupDetails(), function (row) {
            row.IsSelected(true);
        });
    });

这段代码row.IsSelected(true); 实际上是设置 IsSelected 可观察值为true。

要从 ObservableArray 中删除项目，您应该使用类似：

viewModel.NewAccountGroupDetails.remove(function(item) {
    return item.IsSelected();
});

还要将json值转换为viewModel，看看mapping plugin