0

我想要以下。想象一下,你有一个有几个问题和一个成绩的家庭作业。每个问题都有几个部分和难度级别。每个部分都有一个属性对或错。

我想通过嵌套模型来实现这个逻辑(或者不管你怎么做,这只是我最好的猜测)。所以会有一个模型“部分”具有正确或错误的属性。然后会有一个称为问题的模型,它有几个与之相关的部分(一个集合?不确定这是否可能)和一个属性难度。然后你会有一个模型作业,它会有几个与之相关的问题和一个属性等级。

我的问题是:

这可能吗?如果是这样,您的一般模型创建的语法是什么?渲染这个的语法是什么?

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

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

那么你是怎么做到的呢?

4

1 回答 1

1

有很多方法可以做到这一点。Backbone Layout Manager提供了一种很好的、​​惯用的方法来处理嵌套模型,但是对于更小(或更专业)的应用程序,您可能会发现自己想要滚动自己的模型。Homework由于and之间的关系看起来与 a和 aProblem之间的关系非常相似,因此您可以通过以下方式处理前者之间的关系。ProblemPart

首先定义您的模型和集合:

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

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

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

希望这会有所帮助!

于 2012-07-24T06:13:49.973 回答