Question

I am working on my first project using backbone.js. It should be a frontend to a Play! App with a JSON interface. Here’s a part of my JS code

var api = 'http://localhost:9001/api'

// Models
var Node = Backbone.Model.extend();

// Collections
var Nodes = Backbone.Collection.extend({
  model: Nodes,
  url: api + '/nodes',
});

// Views NODE
var NodeView = Backbone.View.extend({
  el: $("#son_node_elements"),
  render: function(){
    var source = $("#son_node_item_templ").html();
    var template = Handlebars.compile(source);
    $(this.el).append(template(this.model.toJSON()));
    return this;
  }
});

var NodeListView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, "render");
    this.collection = new Nodes();
    this.collection.bind("change",this.render);
    this.collection.fetch();
    this.render();
  },

  render: function(){
    _(this.collection.models).each(function(item){ 
      var nodeView = new NodeView({model: item});
      $(this.el).append(nodeView.render().el);
    }, this);   
  }
});

Nodes = new NodeListView({el:$('#son_nodes')});

My Problem is that when this.render() is called, this.collection.fetch() is still not done and this.collection does not contain anithing to render. All works fine when I set a breakpoint at this.render() (for example using firebug), so this.render() is not called immediately. I get exactly the same result when I access a local JSON file instead of the api of my app. Any suggestions how to handle this issue?

Answer 1

Fetch can also be called from outside view, so let the view listen for that instead:

this.collection.bind("reset",this.render);  

Reset event will be triggered on every call to this.collection.fetch(); 

And finally, skip this.render(); Don’t call this yourself, since reset event handler do this for you.