title: How do I render a Backbone Collection in a List and Item View?
body: <p>I am working on a contact bar which renders all contacts of a user in a html list.</p>
  
  <p>What I have:</p>
  
  <ol>
  <li>UserModel - This is a simple Backbone.Model with username and email</li>
  <li>UserCollection - This is used as the contact list</li>
  <li>ContactsView - This is the ul contact list</li>
  <li>ContactView - This is a single contact model rendered as li</li>
  </ol>
  
  <p>I am currently breaking my head about a solution how (and where) I can fetch my UserCollection and how I pass the single models down to a single ContactView item.</p>
  
  <p>Specific hurdles are:</p>
  
  <ol>
  <li>Where should I fetch, store the UserCollection</li>
  <li>How do I render the contact list</li>
  <li>How do I render the contact items</li>
  <li>How do I prevent fetch({ success: callback }) from breaking my code structure</li>
  </ol>
  
  <p>My current code is this:</p>
  
  <p>entrance point:</p>
  
  <pre><code>// create a new instance of the contact list view
  var view = new ContactsView();
  // insert the rendered element of the contact list view in to the dom
  $('div.contacts-body').html(view.render().el);
  view.fetch({ success: view.loadContacts });
  </code></pre>
  
  <p>ContactsView:</p>
  
  <pre><code>define(
      ['jquery', 'underscore', 'backbone', 'text!templates/conversations/contacts.html', 'collections/users', 'views/conversations/contact'],
      function($, _, Backbone, ContactsTemplate, UserCollection, ContactView) {
  
          var ContactsView = Backbone.View.extend({
  
              tagName: "ul",
  
              className: "contacts unstyled",
  
              attributes: "",
  
              // I am feeling uneasy hardcoding the collection into the view
              initialize: function() {
                  this.collection = new UserCollection();
              },
  
              // this renders our contact list
              // we don't need any template because we just have &lt;ul class="contacts"&gt;&lt;/ul&gt;
              render: function() {
                  this.$el.html();
                  return this;
              },
  
              // this should render the contact list
              // really crappy and unflexible
              loadContacts: function() {
                  this.collection.each(function(contact) {
                      // create a new contact item, insert the model
                      var view = new ContactView({ model: contact });
                      // append it to our list
                      this.$el.append(view.render().el);
                  });
              }
  
          });
  
          return ContactsView;
  
  });
  </code></pre>
  
  <p>ContactView</p>
  
  <pre><code>define(
      ['jquery', 'underscore', 'backbone', 'text!templates/conversations/contact.html'],
      function($, _, Backbone, ContactTemplate) {
  
          var ContactView = Backbone.View.extend({
  
              tagName: "li",
  
              className: "contact",
  
              attributes: "",
  
              template:_.template(ContactTemplate),
  
              initialize: function() {
                  this.model.bind('change', this.render, this);
                  this.model.bind('destroy', this.remove, this);
              },
  
              render: function() {
                  this.$el.html(this.template(this.model.toJSON()));
                  return this;
              }
  
          });
  
          return ContactView;
  
  });
  </code></pre>
  
  <p>Could somebody help me about my four hurdles.</p>
  
  <p>Good example links are welcome. I oriented my code style at the todos list unfortunatly the todos list isn't that advanced...</p>
  
  <p><strong>UPDATED CODE:</strong></p>
  
  <pre><code>define(
      ['jquery', 'underscore', 'backbone', 'text!templates/conversations/contacts.html', 'collections/users', 'views/conversations/contact'],
      function($, _, Backbone, ContactsTemplate, UserCollection, ContactView) {
  
          var ContactsView = Backbone.View.extend({
  
              tagName: "ul",
  
              className: "contacts unstyled",
  
              attributes: "",
  
              events: {
  
              },
  
              initialize: function() {
                  this.collection = new UserCollection();
                  this.collection.on('reset', this.render);
                  this.collection.fetch();
              },
  
              render: function() {
                  // in chromium console
                  console.log(this.el); // first: html, second: undefined
                  console.log(this.$el); // first: html in array, second: undefined
                  this.$el.empty(); // error on the called that this.$el is undefined
  
                  this.collection.each(function(contact) {
                      var view = new ContactView({ model: contact });
                      this.$el.append(view.el);
                  }.bind(this));
  
                  return this;
              }
  
          });
  
          return ContactsView;
  </code></pre>
  
  <p>Can it be that reset is triggering this.render twice?</p>