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