骨架.js渲染/在其他模型中创建多个模型

Question

我想要以下内容。 想象一下，您有一个作业，其中有几个问题和一个等级。 每个问题都有几个部分和一定程度的难度。 每个部分都有正确或错误的属性。

我想通过嵌套模型实现该逻辑（或者实际上，但是您可以做到，这只是我的最佳猜测）。 因此，将存在一个模型“零件”，该零件具有正确或错误的属性。 然后将有一个称为问题的模型，它具有与之相关的几个部分（一个集合？不确定是否可能）和一个属性难度。 然后，您将获得一个模型作业，该作业将具有与之相关的几个问题以及一个属性等级。

我的问题是：

这可能吗？ 如果是这样，那么创建一般模型的语法是什么？ 呈现此内容的语法是什么？

我正在寻找像这样的一般东西：

var Homework=Backbone.model.extend({
   defaults:{
     grade:100,
     parts: var parts=Backbone.model.extend({ .... //this definitely seems wrong });
     },
 });

var Homeworkview=Backbone.view.extend({
    initialize: function(){
    //create one question with one part
    },
    render: function(){
    //render template for homework grade then call function to render question, which then renders parts},
 });

那你怎么做呢？

Answer 1

有很多方法可以做到这一点。 Backbone Layout Manager提供了一种很好的，惯用的方式来处理嵌套模型，但是对于较小（或更专业）的应用程序，您可能会发现自己想自己滚动。 由于“ Homework和“ Problem之间的关系似乎与“ Problem和Part之间的关系非常相似，因此，这是处理前者与Part之间的关系的一种方法。

首先定义模型和集合：

var Problem = Backbone.Model.extend({
  // defaults, constructor, etc.
});

var ProblemCollection = Backbone.Model.extend({
  model: Problem
});

接下来，“父”模型将需要某种方式来跟踪问题的集合。 如果需要，我在这里写了一些解释 ，但是总体思路如下：

var Homework = Backbone.Model.extend({

  defaults:{
    grade:100,
    problems: []
  },

  initialize: function () {
    // initialize a collection of the "Problems" in this Homework
    this.problems = new ProblemCollection(this.get('parts'));
  }
});

接下来，意见。 子视图可以是您想要的任何视图。

var ProblemView = Backbone.View.extend({
  tagName: 'li'
  // rendering, initializers, etc.
});

父视图可能会稍微复杂一些。 由于您具有在Homework模型中存储的所有Problem模型的集合，因此可以根据需要为每个模型创建一个新视图。

var HomeworkView = Backbone.View.extend({

  render: function () {

    // create a container for problems
    var $problems = $('<ul class="problem-list"></ul>');

    // create a view for each problem
    this.model.problems.each(function (model) {
      var $problem = $('<li class="problem"></li>'),
          problemView = new ProblemView({
            model: model,
            el: el
          });
      $problems.append($problem);
    });

    this.$el.empty().append($problems);

    return this;
  }
});

希望这会有所帮助！