當我嘗試從中刪除一個項目時，如果它有多個項目，則淘汰，收集屬性將變爲空？

Question

我真的很奇怪的淘汰賽錯誤。這是一個相當複雜的情況，所以請參閱此琴：

http://jsfiddle.net/yx8dkLnc/

基本上我有一個雙重嵌套的集合，第一集合FishMeasurements包含有與它相關的物種的信息對象的集合，並且集合其中包含與該物種相關的所有測量結果。

現在，當我嘗試和嵌套集合在這個HTML刪除項目：當Measurements集有多於一個對象

<!-- ko foreach: FishMeasurements() --> 
       <h3><span data-bind="text: SpeciesName"></span><span data-bind="text: SpeciesId" style="display: none;"></span></h3> 
       <table class="table table-striped"> 
        <thead> 
         <tr> 
          <th>Length</th> 
          <th>Count</th> 
          <th>Weight</th> 
          <th>Fish Id</th> 
          <th>&nbsp;</th> 
         </tr> 
        </thead> 
        <tbody data-bind="foreach: Measurements()"> 
         <tr> 
          <td><span data-bind="text: LengthInMillimeters"></span></td> 
          <td><span data-bind="text: Count"></span></td> 
          <td><span data-bind="text: WeightInPounds"></span></td> 
          <td><span data-bind="text: FishCode"></span></td> 
          <td><a href="#" data-bind="click: function() { $root.removeMeasurement($data, $index); }">Remove</a></td> 
         </tr> 
        </tbody> 
       </table> 
      <!-- /ko --> 

刪除測量功能不起作用。我點擊刪除鏈接，它拋出一個錯誤，指出：

VM617:163 Uncaught TypeError: Cannot read property 'Measurements' of null(…)

關於這個奇怪的是，如果我只有一個項目添加到測量集合，刪除按鈕做工精細，但只要我添加多個度量，如果我單擊刪除表中的任何項目，但第一行，則會生成此錯誤。但是，如果我點擊每個物種的表中的第一個項目，則沒有錯誤，並且所有記錄都被刪除！

東西告訴我，它的治理措施像一個對象，而不是一個集合，因爲它僅適用於指數0。但我不知道，因爲在控制檯我可以鍵入：

mappedModel.FishMeasurements()[0].Measurements()[1] 

並獲得一個完整的ko_mapping對象返回，所以它不是null。但由於某些原因，當我單擊刪除時，它是空的。只要每個物種只有一個測量值，點擊刪除就可以正常工作，只要它有更多的中斷。

我在做什麼錯？

Answer 1

當你addMeasurement首次speciesId，speciesName越來越定義，因爲fishMeasurementBySpecies === undefined，因此，當你刪除你有一個有效的measurement.SpeciesId()作爲內部removeMeasurement功能，但第二次，自fishMeasurementBySpecies多參數的第一個項目是不是undefined不再然後speciesId,speciesName永遠不會被設置，然後當removeMeasurement被調用時，measurement.SpeciesId()爲空。

爲了使您的模型有效，您需要應用以下更改。

你如果statment之前定義var speciesId = mappedModel.SelectedSpecies();

var speciesId = mappedModel.SelectedSpecies(); 
if (fishMeasurementBySpecies === undefined || fishMeasurementBySpecies === null) { 

，你想要得到的長度

if(fishMeasurementBySpecies.Measurements().length === 0) 

下面我爲你提供你想要做什麼的例子

將()爲Measurements removeMeasurement函數內通過使用手動查看模型而不是使用mapping插件。

---

例子：https://jsfiddle.net/kyr6w2x3/118/

你舉的例子：http://jsfiddle.net/yx8dkLnc/1/

VM：

var data = { 
    "AvailableSpecies": 
      [ 
      {"Id":"f57830b8-0766-4374-b481-82c04087415e","Name":"Alabama Shad"},  
      {"Id":"3787ce10-e61c-4f03-88a5-ff648bb55480","Name":"Alewife"},{"Id":"e923214f-4974-4663-9158-d6979ce637f1","Name":"All Sunfish Spp Ex Bass And Crappie"}   ], 
     "SelectedSpecies": null, "CountToAdd":0,"LengthToAdd":0,"WeightToAdd":0,"GenerateFishCode":false,"FishMeasurements":[] 
}; 
function AppViewModel(){ 
    var self = this; 
    self.AvailableSpecies = ko.observableArray(data.AvailableSpecies); 
    self.SelectedSpecies = ko.observable(); 
    self.CountToAdd = ko.observable(); 
    self.LengthToAdd = ko.observable(); 
    self.WeightToAdd = ko.observable(); 
    self.FishCode = ko.observable(); 
    self.FishMeasurements = ko.observableArray([]); 

    self.addMeasurement = function(item) { 
    var SpeciesExists = false; 

    ko.utils.arrayForEach(self.FishMeasurements(), function (item) { 
     if(item.SpeciesId() == self.SelectedSpecies().Id) { 
     var len = item.Measurements().length; 
     // you may have a better way to generate a unique Id if an item is removed 
     while(item.Measurements().findIndex(x => x.Id() === len) > 0){ 
      len++; 
     } 
     item.Measurements.push(new MeasurementsViewModel({LengthInMillimeters:self.LengthToAdd(), 
                  Count:self.CountToAdd(), 
                  WeightInPounds:self.WeightToAdd(), 
                  FishCode:self.FishCode(), 
                  Id:len ++, 
                  ParentId:self.SelectedSpecies().Id 
                  }) 
           ); 
     SpeciesExists = true; 
     } 
    }); 
    if(!SpeciesExists){ 
     self.FishMeasurements.push(new FishMeasurementsViewModel({SpeciesName:self.SelectedSpecies().Name, 
                   SpeciesId:self.SelectedSpecies().Id, 
                   Measurements:[{LengthInMillimeters:self.LengthToAdd(), 
                       Count:self.CountToAdd(), 
                       WeightInPounds:self.WeightToAdd(), 
                       FishCode:self.FishCode(), 
                       Id:1}] 
                   }) 
           ); 
    } 
    } 
    self.removeMeasurement = function(data){ 
     ko.utils.arrayForEach(self.FishMeasurements(), function (item) { 
      if(item && item.SpeciesId() == data.ParentId()) { 
      ko.utils.arrayForEach(item.Measurements(), function (subItem) { 
       if(subItem && subItem.Id() == data.Id()) { 
           item.Measurements.remove(subItem); 
       } 
      }); 
      } 
      if(item && item.Measurements().length == 0){ 
      self.FishMeasurements.remove(item); 
      } 
     }); 
    } 
} 
    var FishMeasurementsViewModel = function(data){ 
    var self = this; 
    self.SpeciesName = ko.observable(data.SpeciesName); 
    self.SpeciesId = ko.observable(data.SpeciesId); 
    self.Measurements = ko.observableArray($.map(data.Measurements, function (item) { 
    return new MeasurementsViewModel(item,self.SpeciesId()); 
    })); 

} 
var MeasurementsViewModel = function(data,parentId){ 
    var self = this; 
    self.LengthInMillimeters = ko.observable(data.LengthInMillimeters); 
    self.Count = ko.observable(data.Count); 
    self.WeightInPounds = ko.observable(data.WeightInPounds); 
    self.FishCode = ko.observable(data.FishCode); 
    self.Id = ko.observable(data.Id); 
    self.ParentId = ko.observable(parentId ? parentId : data.ParentId); 
} 

var viewModel = new AppViewModel(); 
ko.applyBindings(viewModel);