Question

I’ve read many tutorials and made a search on the .net… but still I’m in trouble with Backbone.js. This is my simple scenario:

A Rails application responds to a GET request with a JSON collection of objects.
I want to dynamically build a list of table-rows with Backbone collections, when DOM is ready. This is the code is confusing me:

HTML part:

  <script type="text/template" id="tmplt-Page">
      <td>{{=title}}</td>
      <td>{{=description}}</td>
  </script>

Backbone’s script:

$(function(){
    var Page = Backbone.Model.extend({});

    var Pages = Backbone.Collection.extend({
        model: Page,
        url: '/pages'
    });
    var pages = new Pages([
        {title: 'ProvA1', description: ''},
        {title: 'ProvA2', description: ''}
    ]);

    var PageView = Backbone.View.extend({
        tagName: 'tr',
        template: _.template($('#tmplt-Page').html()),

        render: function() {
            this.$el.append(this.template(this.model.toJSON()));
            return this;
        }

    });

    var AppView = Backbone.View.extend({
        el: $("#results"),

        initialize: function () {
            _.bindAll(this, 'render');
            pages.on('reset', this.render)
        },

        render: function() {
            this.$el.empty();
            pages.each( function( page ) {

                var view = new PageView({
                  model : page
                });

                this.$el.append(view.render().el);

            });

            return this;
        }

    });

    var appview = new AppView;

});

Nothing renders on the screen.

There seem to be 2 problems:

1) fetch() is asynchronous, so the code is executed before the end of the ajax round-trip.

2) If I manually load some objects into the collection, this piece of code “this.template(this.model.toJSON())” does not substitute jSON attributes

EDIT :

To use mustache tags I wrote this code before all:

Answer 1

First, as you said, fetch() is asynchronous, but it triggers the ‘reset’ event when it completes, so you should add this in AppView.initialize:


pages.on('reset', this.render)


Second, you never insert the HTML of PageView anywhere. Add this in AppView.render:


// at the beginning
var self = this;
// and in the forEach loop
self.$el.append(view.el);


Third, at the beginning of AppView.render, you should clear the content of this.$el.

EDIT:

You still had a couple issues:

• You are using underscore templates with mustache tags ({{ }} -> <%= %>)
• Missing var self = this in render
• You are not calling appview.render() ! 🙂

Here’s your code working on jsfiddle: http://jsfiddle.net/PkuqS/