如何使用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可觀察值爲真

從ObservableArray刪除的項目，你應該使用類似：

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

而且以JSON值轉換爲視圖模型，看看在mapping plugin