在 Observable 数组中挖空 observable 数组，添加 remove 方法答案

【问题标题】：Knockout observable array within Observable array, add remove methods在 Observable 数组中挖空 observable 数组，添加 remove 方法
【发布时间】：2014-08-26 13:21:19
【问题描述】：

我有一个包含另一个数组的淘汰赛可观察数组。我正在尝试让两个数组（CountyCollections、specialCollections）的（添加/删除）方法工作。我只需要能够添加或删除特定的 CountyCollection 或 specialCollection。我需要做哪些改变？这是我的视图模型和代码。

var initialData = {
     FirstName: "George",
     LastName: "Jettison",
     CountyCollections: [{
         applicationIdentifier: "",
         countyId: 0,
         countyCode: "01",
         countyName: "",
         specialtyCollections: [{
             applicationIdentifier: "99",
             countyCode: "03",
             specialtyId: 0,
             specialtyName: "",
             patentRegistrationNumber: ""
         }]
     }]
 };

var ResultModel = function (data) {
     var self = this;
     self.FirstName = ko.observable(data.FirstName);
     self.LastName = ko.observable(data.LastName);
     self.CountyCollections = ko.observableArray(ko.utils.arrayMap(data.CountyCollections,
      function (item) {
         return item;
     }));

     self.CountyCollections.specialty = ko.observableArray([]) ;   

      var getById = function (items, id) {
            return ko.utils.arrayFirst(items, function (item) {
                return item.countyCode === id;
            });
        }; 

     self.addSpecialty = function() { 
         alert(self.CountyCollections()[0].specialtyCollections[0].applicationIdentifier);
         self.CountyCollections()[0].specialtyCollections.push(new specialtyCollections);};


     self.addCounty = function () {
         alert(self.CountyCollections.length);
         self.CountyCollections.push(data);
     };

     self.removeCounty = function (data) {
         self.CountyCollections.remove(data);
     };
 };

 ko.applyBindings(new ResultModel(initialData));

这是我的部分工作的 jsfiddle：http://jsfiddle.net/CurtRabon/ntoezwuk/12/

【问题讨论】：

什么不起作用？我无法理解你的小提琴想要做什么......

标签： javascript knockout.js

【解决方案1】：

既然你想从specialtyCollections添加/删除项目，它应该是可观察的

这可以通过多种方式解决。您可以使用 mapping plugin 或更改您的 arrayMap 处理函数将嵌套数组转换为 observableArray

 function (item) {
       item.specialtyCollections = ko.observableArray(item.specialtyCollections);
       return item;
 }

添加项目

虽然这可能是一个临时的实现细节，但不应将addSpecialty 硬编码为使用索引0

要将specialty 添加到“当前”父对象，您可以使用为您设置函数的上下文（在 foreach 绑定中使用时）这一事实。

self.addSpecialty = function () {
     this.specialtyCollections.push({
         applicationIdentifier: Math.floor((Math.random() * 100) + 1)
     });
 };

或者，如果您愿意，knout 将提供该元素作为参数

self.addSpecialty = function (data) {
     data.specialtyCollections.push({
         applicationIdentifier: Math.floor((Math.random() * 100) + 1)
     });
 };

以上两种用法在标记中都表示为：

<button data-bind='click: $parent.addSpecialty'>New Specialty</button

删除项目

有很多方法可以实现此功能。在标记中，您提供了$parent.removeSpecialty，这表明您希望实现位于给定项目列表的对象容器中。因此，您需要在arrayMap 期间提供该功能。然后绑定将变为

<button data-bind='click: function(){$parent.removeSpecialty($data)}'>X</button>

或者，您可以在$root 级别提供函数

self.removeSpecialty = function (county, item) {          
     county.specialtyCollections.remove(item)
 }

并提供两个必要的参数

<button data-bind='click: function(){$root.removeSpecialty($parent, $data)} '>
 Remove Specialty
</button>

【讨论】：