title: backbone : Collection and View rendering
body: <p>I am really confused on this one and need help. (unrelated : "up for about 36 hours now to finish somthing and this last part is just making me go crazy")</p>
  
  <h1>My Code</h1>
  
  <pre><code> &lt;body&gt;
  &lt;div id="mycontainer" style="margin: 20px; "&gt;
  &lt;/div&gt;
  
  &lt;script type="text/template" id="Myelement_template"&gt;
      &lt;% _.each( results, function( item, i ){ %&gt;
              &lt;div id="Myelement" style="width: 200px; height:325px; padding: 10px; background-color: #2980b9;"&gt;
                  &lt;div id="image" style="width: 190px; height: 200px; margin: auto; background-color: #f1c40f;"&gt;
                      &lt;img src="&lt;%= item.get('category').url %&gt;" style="max-width: 90%;margin-top: 10px;"&gt;
                  &lt;/div&gt;
                  &lt;div id="type" style="float:left;width: 90px; height: 25px; margin-left: 5px;margin-top: 5px;background-color: #f1c40f;"&gt;
                      &lt;%= item.get("category").type %&gt;
                  &lt;/div&gt;
                  &lt;div id="name" style="float:left;width: 90px; height: 25px; margin-left: 10px; margin-top: 5px;background-color: #f1c40f;"&gt;
                      &lt;%= item.get("category").name %&gt;
                  &lt;/div&gt;
              &lt;/div&gt;                    
          &lt;% }); %&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
   $(document).ready(function() {
  
  CategoryModel = Backbone.Model.extend({
      defaults: {
          url: '',
          type: '',
          name: ''
      }
  });
  
  MyListModal = Backbone.Model.extend({
      url: 'myrestapi',
      defaults: {
          category: CategoryModel
      }
  });
  
  MyElementView = Backbone.View.extend({
        initialize: function() {
          _.bindAll(this, 'render'); // bind 'this' in 'render'
          this.model = new MyListModal();
          this.model.bind('change', this.render);
          this.model.fetch(this.render);
       },
      el: $("#mycontainer"),
      render: function(){
          console.log(this.model.get("category"));
      }
  });
  
   var myModelView = new MyElementView();
  });
   &lt;/script&gt;
  </code></pre>
  
  <h1>Question</h1>
  
  <p>My rest api will return many BaseModel objects. All of them need to be rendered. How do I do that?</p>
  
  <ol>
  <li>console.log(this.model.get("category")); - code reaches here. not printing. debugging shows that rest api call was made and cata has been returned</li>
  <li>How do I render all returned elements?</li>
  </ol>
  
  <p>Sample Data returned by rest API</p>
  
  <pre><code>[
  {
      "category": {
          "id": 1,
          "name": "name1",
          "type": "mytype1",
          "url": "myurl1"
      },
      "user": {
          "id": 153
      },
      "status": 1
  },
  {
      "category": {
          "id": 1,
          "name": "name2",
          "type": "type2",
          "url": "url2"
      },
      "user": {
          "id": 153
      },
      "status": 1
  },
  ]
  </code></pre>