Backbone.js - fetch data and display

Question

I'm just beginning out on Backbone.js. Here's my code.

$(function(){

    //Backbone Model
    var Cat = Backbone.Model.extend({});

    // create a collection
    var CatCollection = Backbone.Collection.extend({
        model: Cat,
        url: 'http://localhost/cats/index.php/cats/index'
    });
    var catCollection = new CatCollection();
    catCollection.fetch();

    // Backbone view
    var CatView = Backbone.View.extend({
        el: $("#contents"),
        initialize: function() {
            this.render();
        },
        render: function() {
            this.el.html(catCollection);
        }
    });

    var catView = new CatView();
});

What I am doing is.

1. Create a backbone model
2. Create a collection using the model I created.
3. Fetch data from MySQL database - this returns a JSON data object.
4. Display the fetched data in the div "#contents".

On google Chrome, I can see that the "fetch()" method works, because I can see my JSON object returned as

[{"id":"1","name":"stella","age":"5"},{"id":"2","name":"Max","age":"2"}]

But if I do "alert(catCollection)" after the fetch, it displays "[object] [object]".

What is the best way of displaying this?

Answer 1

You should use the templates in JST array.

$(this.el).html($(JST["comments/item"](model.toJSON())));

"comments\item" is the template path and name If you are using Rails, just use the Jammit and write templates with ERB (default) or Jade

Answer 2

The backbone.js documentation give an example like so:

alert(JSON.stringify(catCollection));

http://backbonejs.org/#Collection-toJSON