javascript - knockout ，当我尝试从其中删除一项(如果其中包含多个项目)时，集合属性变为空？

Question

我遇到了非常奇怪的 knockout 错误。这是一个非常复杂的场景，所以请看这个 fiddle :

http://jsfiddle.net/yx8dkLnc/

基本上我有一个双层嵌套集合，第一个集合 FishMeasurements 包含一个对象集合，该对象具有与其相关的物种信息，以及一个 Measurements 集合，其中包含与该物种相关的所有测量值。

现在，当我尝试从这个 HTML 中的嵌套集合中删除项目时:

<!-- 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 -->

当 Measurements 集合有多个对象时，删除测量功能不起作用。我单击删除链接，它会抛出一条错误消息:

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

奇怪的是，如果我只将一个项目添加到 Measurements 集合，删除按钮可以正常工作，但是一旦我添加多个测量值，如果我在表中的任何项目上单击删除，但第一行除外，就会产生这个错误。但是，如果我按物种单击表中的第一项，则没有错误，所有记录都被删除了!

有些事情告诉我它把 Measurements 当作一个对象而不是一个集合来处理，因为它只适用于索引 0。但我不确定，因为在控制台中我可以输入:

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

并返回一个完整的 ko_mapping 对象，因此它不为空。但是由于某种原因，当我单击删除时，它为空。只要每个物种只有一个测量值，点击删除就可以正常工作，一旦有更多它就会中断。

我做错了什么？

Answer 1

当您第一次addMeasurement speciesId 时，speciesName 正在被定义，因为fishMeasurementBySpecies === undefined因此，当您删除第一个项目时，您有一个有效的 measurement.SpeciesId() 作为 removeMeasurement 函数中的参数，但这是自 fishMeasurementBySpecies< 以来的第二次和更多次 不再是 undefined 然后 speciesId，speciesName 永远不会被设置然后当 removeMeasurement 被调用时，measurement.SpeciesId() 为空。

为了使您的模型正常工作，您需要应用以下更改。

在您的 if 语句之前定义 var speciesId = mappedModel.SelectedSpecies();

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

将 () 用于 Measurements 放在您想要获取长度的 removeMeasurement 函数中

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

下面我为您提供了一个示例，说明您想通过使用手动 View 模型而不是使用 mapping 插件来做什么。

---

示例:https://jsfiddle.net/kyr6w2x3/118/

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

虚拟机:

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);