backbone.js rendering/creating multiple models within other models

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?

If possible, would anyone mind providing a brief description of when the backbone-relational model is appropriate and when rjz's method is appropriate? Thanks! (I'm reading this: antoviaque.org/docs/tutorials/backbone-relational-tutorial) — Mark
– Mark, Commented Jul 24, 2012 at 6:47

rjz · Accepted Answer · 2012-07-24 06:13:49Z

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!

answered Jul 24, 2012 at 6:13

rjz

16.5k3 gold badges39 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mark Over a year ago

Fantastic, this is very helpful. I'll accept this as an answer if there's a satisfactory reason for using this as opposed to relationals (I think I like this method a little bit better anyway)

Mark Over a year ago

also, is this.problem=new ProblemCollection(this.get('parts')); the proper syntax? Wouldn't you have to do this.set({problem:new ProblemCollection(this.get('parts'));

rjz Over a year ago

You would use set if you wanted to set the collection as a model attribute, but (for the simple case outlined here) it's probably easier to attach it directly to the model class and bypass serialization/validation/etc, etc.

rjz Over a year ago

Also, to answer #1, Backbone.relational provides a clean, consistent syntax for providing the kind of ad-hoc association described in Homework. It's a great way to go if you're planning to use lots of relationships (or more complicated ones), but you may opt to DIY-it for simpler applications.

Mark Over a year ago

I'm planning on having something like Homework->(10-20 relationships)->problems->(4-5 relationships)-> parts. I think that your method is definitely sufficient and makes a ton of sense. There's nothing complicated about the relationships at all, they're completely vanilla and when interacting with the server they'll all be bundled (ideally) into one string which I'll unravel with a perl reg exp. Do you think this method will be appropriate? I think it will but I just wanted to double check. Also I'll be rendering them but I think I can just do that one at a time.

Collectives™ on Stack Overflow

backbone.js rendering/creating multiple models within other models

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related