KnockoutJS - 地圖多維數組

Question

我需要將此數組映射到可觀察數組。

actionsDataTime =  { 
     "t16082209": [ 
     { 
      "timeId": "16082209", 
      "id": 176, 
      "class_from": "09:00", 
      "class_to": "10:25", 
      "action": { 
      "name": "AQUA", 
      "color": "aqua", 
      "icon": "" 
      }, 
      "trainer": { 
      "id": 348, 
      "name": "Art Edition" 
      }, 
      "capacity": 11, 
      "capacity_left": 11, 
      "substitutes": 5, 
      "substitutes_left": 5, 
      "price": 1 
     } 
     ], 
     "t16082308": [ 
     { 
      "timeId": "16082308", 
      "id": 169, 
      "class_from": "08:00", 
      "class_to": "09:00", 
      "action": { 
      "name": "ZUMBA", 
      "color": "zumba", 
      "icon": "" 
      }, 
      "trainer": { 
      "id": 210, 
      "name": "Adam Pt\u00e1\u010dek" 
      }, 
      "capacity": 10, 
      "capacity_left": 10, 
      "substitutes": 5, 
      "substitutes_left": 5, 
      "price": 1 
     } 
     ], 
     "t16082408": [ 
     { 
      "timeId": "16082408", 
      "id": 173, 
      "class_from": "08:00", 
      "class_to": "09:05", 
      "action": { 
      "name": "KICK BOX", 
      "color": "box", 
      "icon": "" 
      }, 
      "trainer": { 
      "id": 360, 
      "name": "Alexandra Galov\u00e1" 
      }, 
      "capacity": 10, 
      "capacity_left": 10, 
      "substitutes": 5, 
      "substitutes_left": 5, 
      "price": 2 
     }, 
     { 
      "timeId": "16082408", 
      "id": 175, 
      "class_from": "08:00", 
      "class_to": "09:05", 
      "action": { 
      "name": "KICK BOX", 
      "color": "box", 
      "icon": "" 
      }, 
      "trainer": { 
      "id": 360, 
      "name": "Alexandra Galov\u00e1" 
      }, 
      "capacity": 10, 
      "capacity_left": 10, 
      "substitutes": 5, 
      "substitutes_left": 5, 
      "price": 2 
     } 
     ] 
    } 

部分「t16082308」是我在應用程序中需要的一些時間戳，因此它是動態的。數組中的動作數量也可以改變。

我能夠通過映射模塊這種方式映射該

ko.mapping.fromJS(actionsDataTime, self.actionsData); 

但是當我需要從服務器重新裝入這樣

self.reloadActions = function() { 

        $.ajax({ 
         type: 'GET', 
         url: {link reloadActions! }, 
         dataType: "json", 
         success: function(data) { 
          ko.mapping.fromJS(data, {}, self.actionsData); 
         } 
        }) 
       }; 

，是有一個新的時間戳部分或SOMA新行動 - 在前端沒有任何變化，它看起來並不是所有的東西都被映射爲可觀察的。當我只改變一些像「容量」這樣的值時，它可以正常工作。

如何更好地映射它（全部觀察對象），以便在添加或刪除操作時看到更改？

Answer 1

這是我會怎麼做：

 var actionObj = function (data) { 
      this.name = ko.observable(); 
      this.color = ko.observable(); 
      this.icon = ko.observable(); 
      this.update(data); 
     } 

     ko.utils.extend(actionObj.prototype, { 
      update: function (data) { 
       this.name = ko.observable(data.name || ''); 
       this.color = ko.observable(data.color || ''); 
       this.icon = ko.observable(data.icon || ''); 
      } 
     }); 

     self.Action = function (data) { 
      return new actionObj(data); 
     } 

     var trainerObj = function (data) { 
      this.id = ko.observable(); 
      this.name = ko.observable(); 
      this.update(data); 
     } 

     ko.utils.extend(trainerObj.prototype, { 
      update: function (data) { 
       this.id = ko.observable(data.id || ''); 
       this.name = ko.observable(data.name || ''); 
      } 
     }); 

     self.Trainer = function (data) { 
      return new trainerObj(data); 
     } 

     var actionsDataTimeObj = function (data) { 
      this.timeId = ko.observable(); 
      this.id = ko.observable(); 
      this.class_from = ko.observable(); 
      this.class_to = ko.observable(); 
      this.action = ko.observableArray(); 
      this.trainer = ko.observableArray(); 
      this.capacity = ko.observable(); 
      this.capacity_left = ko.observable(); 
      this.substitutes = ko.observable(); 
      this.substitutes_left = ko.observable(); 
      this.price = ko.observable(); 
      this.update(data); 
     } 

     ko.utils.extend(actionsDataTimeObj.prototype, { 
      update: function (data) { 
       this.timeId = ko.observable(data.timeId || ''); 
       this.id = ko.observable(); 
       this.class_from = ko.observable(); 
       this.class_to = ko.observable(); 
       var _action = $.map(data.action, function (item) { 
        return new self.Action(item); 
       }); 
       this.action(_action); 
       var _trainer = $.map(data.trainer, function (item) { 
        return new self.Trainer(item); 
       }); 
       this.trainer(_trainer); 
       this.capacity = ko.observable(); 
       this.capacity_left = ko.observable(); 
       this.substitutes = ko.observable(); 
       this.substitutes_left = ko.observable(); 
       this.price = ko.observable(); 
      } 
     }); 

     self.ActionsDataTime = function (data) { 
      return new actionsDataTimeObj(data); 
     } 

基本上，你必須聲明你的「行動」和「教練」作爲ObservableArrays，然後在ActionsDataTime對象的更新功能的數據，將它們映射。那麼一切都將是可觀察的。

哦，那：

 self.actionsData = ko.observableArray(); 
     var _actiondatatimes = $.map(data, function (item) { 
      return new self.ActionDataTime(item); 
     }); 
     self.actionsData(_actiondatatimes);