骨架.js在其他模型中渲染/创建多个模型 [英] backbone.js rendering/creating multiple models within other models

问题描述

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

I'd like to have the following. Imagine you have a homework assignment that has several problems and a grade. Each problem has several parts and a level of difficulty. Each part has an attribute right or wrong.

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

I'd like to implement that logic through nested models (or really however you can do it, this is just my best guess). So there would be a model 'part' which has an attribute right or wrong. Then there would be a model called problem which has several parts associated with it (a collection? not sure if this is possible) and an attribute difficulty. Then you would have a model homework which would have several problems associated with it and an attribute grade.

我的问题是:

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

Is this possible? If so, what is the syntax for your general model creation? What's the syntax for rendering this?

我正在寻找像这样的常规物品:

I'm looking for something general like this:

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

那你怎么做呢?

推荐答案

有很多方法可以做到这一点.主干布局管理器提供了一种很好的，惯用的方式来处理嵌套模型，但是对于较小的模型(或更多)专用)应用程序，您可能会发现自己想自己动手做.因为家庭作业和问题之间的关系似乎与问题和 Part 之间的关系非常相似，所以这是一种方法您可以处理前者之间的关系.

There are many ways to do this. Backbone Layout Manager provides a nice, idiomatic way of handling nested models, but for a smaller (or more specialized) application, you may find yourself wanting to roll your own. As the relationship between Homework and Problem seems very similar to that between a Problem and a Part, here's one way you might handle the relationships between the former.

首先定义模型和集合:

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

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

接下来，父"模型将需要某种方式来跟踪问题的集合.我写了一些 更多说明 如果需要，但总体思路如下:

Next, the "parent" model will need some way to track a collection of problems. I wrote a little more explanation here if needed, but the general idea looks like this:

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

接下来，查看.子视图可以是您想要的任何视图.

Next up, views. The child view can be whatever you want.

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

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

The parent view will probably be a little more complicated. Since you have a collection of all Problem models stored within the Homework model, you can create a new view for each one as needed.

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

希望这会有所帮助！

这篇关于骨架.js在其他模型中渲染/创建多个模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！