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

backbone.js rendering/creating multiple models within other models

本文关键字：模型 创建 js 其他 backbone      更新时间：2024-02-01

我想要以下东西。想象一下，你的家庭作业有几个问题和一个分数。每个问题都有几个部分和一个难度等级。每个部分都有正确或错误的属性。

我想通过嵌套模型来实现这个逻辑（或者不管你能做什么，这只是我的最佳猜测）。因此，会有一个模型"零件"具有正确或错误的属性。然后会有一个称为问题的模型，它有几个相关的部分（一个集合？不确定这是否可能）和一个属性难度。然后你会有一个模型家庭作业，它会有几个相关的问题和一个属性等级。

我的问题是：

这可能吗？如果是这样的话，一般模型创建的语法是什么？呈现这个的语法是什么？

我正在寻找这样的通用产品：

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

你是怎么做到的？

有很多方法可以做到这一点。Backbone Layout Manager提供了一种很好的、惯用的方法来处理嵌套模型，但对于较小（或更专业）的应用程序，您可能会发现自己想要推出自己的应用程序。由于Homework和Problem之间的关系似乎与Problem和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;
  }
});

希望这能有所帮助！

相关文章：