Nested models of the same 'class' in the Backbone.js framework?

Question

I'm new to Backbone.

Is it possible to define a Model in backbone which contains a list of Models of the same type? Example:

MyModel = Backbone.Model.extend({
  initialize: function() {
    nestedMyModels:new Array();
  },

  addMyModel: function(aModel) {
    // Code here would push() aModel onto array
  },

  render: function() {
     // Loop through array calling render() recursively
  }
});

I would then have a View which started a recursive call to render(). Example:

MyView = Backbone.View.extend({
  render:function() {
     this.model.render();
  }
});

fguillen · Accepted Answer · 2012-03-27T19:48:16.583

3

1 no arrays but Collections

Always that you think in an Array of Models in Backbone think in a Collection.

Now what you have to do is implement a Collection of MyModels and keep one instance of it in your MyModel instance.

// code simplified and not tested
MyModel = Backbone.Model.extend({
  initialize: function() {
    this.nestedMyModels: new MyModels();
  },

  addMyModel: function( model ) {
    this.nestedMyModels.add( model );
  }
});

MyModels = Backbone.Collection.extend({
  model: MyModel
});

2 use Views for render

Always that you think in render think in a View.

And the recommend way is that if you have a Collection and a Model better having a View for each one. This way the View of the Collection will call the View of the Model in an iteration:

// code simplified and not tested
MyModelView = Backbone.View.extend({
  render: function(){
    this.$el.html( model.get("name") );
    var view = new MyModelsView({ collection: this.model.nestedMyModels });
    this.$el.append( view.render.el );

    return this;
  }  
});

MyModelsView = Backbone.View.extend({
  render: function(){
    this.collection.each( function( model ){
      var view = new MyModelView({ model: model });
      this.$el.append( view.render.el );
    });

    return this;
  }
});

edited Mar 27 '12 at 19:48

answered Mar 27 '12 at 19:39

fguillen

36,125
23
149
210

Thank you fguillen. So using a new View for each Model in the collection allows each Model to respond to it's own UI event (for example)? – Jack Mar 28 '12 at 08:05
To clarify, I should have written: 'each Model **instance in the Collection** to respond to its own UI event (for example)? – Jack Mar 28 '12 at 08:36
UI events are related to `View`, not to `Model`, so each unique View will respond to its own UI events. In your case we can say **Yes** but in an especial case where **two different Views** are related to the **same Model** each View will manage its own UI events. – fguillen Mar 28 '12 at 09:22
I have tested this code and it results in an infinite loop. MyModelView renders itself by creating MyModelsView, which in turn renders itself using MyModelView. They just keep calling render on each other. – Jack Mar 29 '12 at 20:11
I found my problem. I was creating a Collection in the initialize method of the model, therefore it was always populating itself. – Jack Mar 30 '12 at 11:00
will this work for: `Model Foo: {id, name, desc, children:[]}` where `children` is a collection of `Foo`s? – mga Sep 17 '12 at 21:45

gaperton · Answer 2 · 2015-10-08T21:07:20.563

Is it possible to define a Model in backbone which contains a list of Models of the same type?

Sure, why not.

var MyModel = Nested.Model.extend();

MyModel.define({
  defaults : {
    nestedMyModels : MyModel.Collection
  },

  addMyModel: function( model ) {
      this.nestedMyModels.add( model );
  }
});

Just not in vanilla Backbone. You'll need a plugin for that. https://github.com/Volicon/backbone.nestedTypes

PS: And as it was mentioned in other responses, you need to use View for rendering stuff. Not models.

score 0 · Answer 3 · answered Mar 27 '12 at 19:25

0

What you want is a collection. It is basically a list or array of models.

answered Mar 27 '12 at 19:25

abraham

46,583
10
100
152

score 0 · Answer 4 · answered Mar 27 '12 at 19:36

0

Collections are ordered sets of models. For more information check out. http://backbonejs.org/#Collection

Here is an example:

var Library = Backbone.Collection.extend({
  model: Book
});

answered Mar 27 '12 at 19:36

John Gagliardi

78
5

Following this example, my question is whether the Library Collection can contain a Library Collection? – Jack Mar 27 '12 at 19:38

Nested models of the same 'class' in the Backbone.js framework?

4 Answers4

1 no arrays but Collections

2 use Views for render

Linked