title: Backbone.js - fetch data and display
body: <p>I'm just beginning out on Backbone.js. Here's my code.</p>
  
  <pre><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();
  });
  </code></pre>
  
  <p>What I am doing is.</p>
  
  <ol>
  <li>Create a backbone model</li>
  <li>Create a collection using the model I created.</li>
  <li>Fetch data from MySQL database - this returns a JSON data object.</li>
  <li>Display the fetched data in the div "#contents".</li>
  </ol>
  
  <p>On google Chrome, I can see that the "fetch()" method works, because I can see my JSON object returned as</p>
  
  <pre><code>[{"id":"1","name":"stella","age":"5"},{"id":"2","name":"Max","age":"2"}]
  </code></pre>
  
  <p>But if I do "alert(catCollection)" after the fetch, it displays "[object] [object]".</p>
  
  <p>What is the best way of displaying this?</p>