Backbone.js not rendering

Question

My collection is not rendering for some reason. Cannot find out why.

TreeItem = Backbone.Model.extend({

});

TreeList = Backbone.Collection.extend({
  model: TreeItem,
  url: "/get_tree_list"
});

window.tree_list = new TreeList();

// VIEW

window.TreeItemView = Backbone.View.extend({
  tagName: 'li',
  initialize: function(){
    _.bindAll(this, 'render');
  },
  render: function(){
    $(this.el).html('<span>'+this.model.get('title')+'</span>');
    return this;
  }
});

window.TreeListView = Backbone.View.extend({
  el: "#tree-structure",
  events: {

  },
  initialize: function() {
    _.bindAll(this, 'appendItem', 'render');
    tree_list.bind('add', this.appendItem);
    tree_list.fetch();
    this.render();
  },
  render: function() {
    tree_list.each(this.appendItem);
    return this;
  },
  appendItem: function(item){
    var tree_item_view = new TreeItemView({
      model: item
    });
    $(this.el).append(tree_item_view.render().el);

  }
});

var tree_list_view = new TreeListView;

Do you get some sort of error? Or does it fail silently?

Elvis D'Souza
– Elvis D'Souza

2012-05-16 04:27:11 +00:00
Commented May 16, 2012 at 4:27 — Elvis D'Souza
– Elvis D'Souza, Commented May 16, 2012 at 4:27

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Backbone.js provides a lot to be interpreted that's where people new go wrong. Your mistake is fundamental in nature. You tie the View directly to the model

see initialize function where a instance of collection is rendered!!
Always and anywhere you create model, collection pass then as parameters to the constructor of views. Check my fiddle
Never call render inside model, view or collection. They must be inside application file

JsFiddle

http://jsfiddle.net/35QGM/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 16, 2012 at 5:03

Deeptechtons

11.1k28 gold badges106 silver badges178 bronze badges

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

3 Comments

fguillen Over a year ago

+1 for the explanation and for the running code example, but I'm more flexible about the points you describe, they are good practices but I would not prefix them with "Always" neither "Never".

Deeptechtons Over a year ago

@fguillen thanks :) just giving sense of direction to Min. Later when he understands he will know of different ways to do it

Min Ming Lo Over a year ago

Thanks for the 'mini-tutorial'. That helps!

Collectives™ on Stack Overflow

Backbone.js not rendering

1 Answer 1

JsFiddle

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JsFiddle

3 Comments

Linked

Related