将数据读入敲除模型

Question

这是我第一次使用淘汰赛。这是构造ViewModel的正确方式吗？我正在读取/写入一个JSON文件，该文件具有相当的嵌套功能。

创建只需编写的模型很容易。让它也读取映射对象中所需的if/ read语句。我觉得是不对的。

如有任何意见，将不胜感激。

function Survey(name, panes, tester) 
    {
      this.name = ko.observable(name);
      this.panes = ko.observableArray([new Pane(panes)]);
      this.tester = ko.observable(tester);
    }

function Pane(panes) 
{
  //var panesCount = panes.length;
  //console.log(panes[0].type);
  if (panes) {
    this.type = ko.observable(panes[0].type);
    this.head = ko.observable(panes[0].head);
    this.content = ko.observable(panes[0].content);
    this.options = ko.observableArray([new PaneOptions(panes[0].options)]);
  }
  else {
    this.type = ko.observable();
    this.head = ko.observable();
    this.content = ko.observable();
    this.options = ko.observableArray([new PaneOptions()]);
  }
}

function PaneOptions(options) 
{
  //console.log(options);
  if (options) {
    this.data = ko.observable(options[0].data);
    this.target = ko.observable(options[0].target);
  }
  else {
    this.data = ko.observable();
    this.target = ko.observable();
  }
}


function SurveyViewModel()
{
  var self = this;
  self.surveys = ko.observableArray([]);


  $.getJSON("create/fetch", function(data) { 
      for (var i=0; i < data.surveys.length; i++) {
        self.surveys.push(new Survey(data.surveys[i].name, data.surveys[i].panes, data.surveys[i].tester))
      }
  });    

  self.addSurvey = function () 
  {
    self.surveys.push(new Survey());
  };

  self.saveUserData = function() 
  { 
    var data_to_send = ko.toJSON(self); 
    $.post("create/save", data_to_send, function(data) { 
      console.log("Your data has been posted to the server!"); 
    }); 
  }

}

var vm = new SurveyViewModel();
ko.applyBindings(vm);

下面是JSON表示：

{
    "surveys": [
        {
            "name": "My First Survey1",
            "panes": [
                {
                    "type": "question1",
                    "head": "Heading Text1",
                    "content": "multichoice1",
                    "options": [
                        {
                            "data": "Time",
                            "target": 2
                        }
                    ]
                }
            ],
            "tester": "default"
        },
        {
            "name": "My Second Survey2",
            "panes": [
                {
                    "type": "response2",
                    "head": "Heading Text2",
                    "content": "multichoice2",
                    "options": [
                        {
                            "data": "Time",
                            "target": 2
                        }
                    ]
                }
            ],
            "tester": "default2"
        },
        {
            "name": "My Third Survey3",
            "panes": [
                {
                    "type": "thanks3",
                    "head": "Heading Text3",
                    "content": "multichoice3",
                    "options": [
                        {
                            "data": "Time",
                            "target": 2
                        }
                    ]
                }
            ],
            "tester": "default3"
        }
    ]
}

Answer 1

我就是这样做的。

JSFiddle演示

var jsonData = {
    "surveys": [{
        "name": "My First Survey1",
            "panes": [{
            "type": "question1",
                "head": "Heading Text1",
                "content": "multichoice1",
                "options": [{
                "data": "Time",
                    "target": 2
            }]
        }],
            "tester": "default"
    }, {
        "name": "My Second Survey2",
            "panes": [{
            "type": "response2",
                "head": "Heading Text2",
                "content": "multichoice2",
                "options": [{
                "data": "Time",
                    "target": 2
            }]
        }],
            "tester": "default2"
    }, {
        "name": "My Third Survey3",
            "panes": [{
            "type": "thanks3",
                "head": "Heading Text3",
                "content": "multichoice3",
                "options": [{
                "data": "Time",
                    "target": 2
            }]
        }],
            "tester": "default3"
    }]
};


function Survey(name, panes, tester) {
    var self = this;
    self.name = ko.observable(name);
    self.panes = ko.observableArray();
    self.tester = ko.observable(tester);

    var mappedPanes = $.map(panes, function (item, index) {
        return new Pane(item);
    });

    self.panes(mappedPanes);

    return self;
}

function Pane(pane) {
    var self = this;
    self.type = ko.observable(pane.type || '');
    self.head = ko.observable(pane.head || '');
    self.content = ko.observable(pane.content || '');
    self.options = ko.observableArray();

    var mappedOptions = $.map(pane.options, function (item, index) {
        return new PaneOptions(item);
    });

    self.options(mappedOptions);

    return self;
}

function PaneOptions(option) {
    var self = this;
    this.data = ko.observable(option.data || '');
    this.target = ko.observable(option.target || '');

    return self;

}


function SurveyViewModel() {
    var self = this;
    self.surveys = ko.observableArray([]);

    /* Commented out as JSON data is included above
    $.getJSON("create/fetch", function (data) {
        $.each(jsonData.surveys, function (index, item) {
        self.surveys.push(new Survey(item.name, item.panes, item.tester));
    });
        }
    });
*/
    $.each(jsonData.surveys, function (index, item) {
        self.surveys.push(new Survey(item.name, item.panes, item.tester));
    });

    self.addSurvey = function () {
        self.surveys.push(new Survey());
    };

    self.saveUserData = function () {
        var data_to_send = ko.toJSON(self);
        $.post("create/save", data_to_send, function (data) {
            console.log("Your data has been posted to the server!");
        });
    };

}

var vm = new SurveyViewModel();
ko.applyBindings(vm);