Question

我只是将一个可观察对象的列表绑定到html表中的TR。当用户选择一行（只能选择一行）时，我希望从可观察数组中删除所选行或可观察对象。我有删除工作，但它完全忽略了行是否被选中。我在每一行上使用一个标志来确定它们是否被检查但值始终为true ...即使您取消选中行上的复选框，这就是为什么它将它们全部删除。有人可以说明下面的淘汰赛设置...研究和测试的日子，但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

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

1 个答案: