backbone.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之间的关系非常相似，因此您可以采用以下方法处理前者之间的关系。

开始通过定义模型和集合：

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

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

下，“父”模式将需要一些方法来跟踪问题的集合。我写了一个小more explanation here如果需要的话，但总的想法是这样的：

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

希望这有助于！