backbone.js rendering/creating multiple models wit

Question

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.

My question is:

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

So how do you do this?

Answer 1

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.

Start by defining your model and a collection:

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

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

Hopefully this helps!