Javascript 在可观测数组中剔除可观测数组，添加移除方法

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

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

这是我的JSFIDLE，它部分工作正常：

• 由于您希望从

  specialtyCollections

  中添加/删除项目，因此应该可以观察到

这可以通过两种方式解决。您可以使用或更改

arrayMap

处理函数将嵌套数组转换为observableArray

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

添加项目

• 虽然这可能是一个临时实施细节，

  addspeciality

  不应硬编码为使用索引

  0

要向“当前”父对象添加

speciality

，可以使用函数的上下文（在foreach绑定中使用时）为您设置这一事实

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

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

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

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

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

或者，您可以在

$root

级别提供该函数

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

并提供必要的参数

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

删除专业

什么不起作用？我不明白你的小提琴想做什么。。。

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