Question

我有一个包含另一个数组的knockout observable数组。我试图让两个数组（CountyCollections，specialCollections）的（添加/删除）方法工作。我需要能够添加或删除特定的CountyCollection或specialCollection。我需要做出哪些改变？这是我的viewmodel和代码。

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/

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

如果您愿意，淘汰赛将提供元素作为参数

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>

Observable数组中的Knockout observable数组，添加remove方法

1 个答案:

添加项目

删除项目