Backbone.js: nested Models and Collections of the same type

Question

Im new to Backbone and am struggling wrapping my head around something. Let me try explain what Im trying to do: Im making an app that has an SVG element with SVG groups inside it. The groups will be nested within each other something like this:

http://i.stack.imgur.com/yAkTE.png

I was trying to use Backbone to create a model and a view for each group. And nesting children groups inside these using collections.

Ive written the following so far just using divs instead of any SVG so as to get the logic working before I implement that side of things. But I guess my thinking is probably just completely wonky somewhere and any help would be much appreciated.

I know there are similar threads around about nesting etc. in Backbone but I havent been able to find any help in them.

You can see a JSFiddle of what Ive written so far here: http://jsfiddle.net/ZqMeV/ Here's the code so far:

(function ($) {

var Cell = Backbone.Model.extend({

    initialize: function(){
        this.children = new CellCollection();
    }

});

var CellCollection = Backbone.Collection.extend({
    model: Cell
});

var CellView = Backbone.View.extend({
    tagName: "div",

    initialize: function(){
        if(this.model.children.models.length > 0){
            _.each(this.model.children.models, function(child){
                console.log(child);
                var cell = new CellView({
                    model: child
                });
                $(this.el).append(cell.el);
            });
        } else {
            $(this.el).html('cell');
        }
    }

});

var Canvas = Backbone.Model.extend({
    initialize: function(){
                    //below is just for testing purposes
        this.content = new Cell();
        var c = new Cell();
        var d = new Cell();
        var e = new Cell();
        this.content.children.add(c);
        this.content.children.add(d);
        d.children.add(e);
    }
});

var CanvasView = Backbone.View.extend({
    el: $("#canvas"),
    tagName: "div",
    initialize: function(){
        this.cellView = new CellView({
            model: this.model.content
        });
        $(this.el).append(this.cellView.el);
    }
});

var canvas = new Canvas();
var canvasView = new CanvasView({
    model: canvas
});

} (jQuery));

Thanks

Answer 1

You have quite a big context problem:

_.each(this.model.children.models, function(child){
  console.log(child);
  var cell = new CellView({
    model: child
  });
  $(this.el).append(cell.el);
});

Here your this inside the each has changed. You could replace it by:

var self = this;
this.model.children.each(function(child) {
  var cell = new CellView({
    model: child
  });
  $(self.el).append(cell.el);
});

Oh and by the way, Backbone's Collections proxy a lot of underscore methods, so I took the liberty to change your each. You can also replace this.model.children.models.length by this.model.children.length . Learn to use the collections, not only the array inside :)