title: CanJS - how does the views .ejs get populated at the index.html
body: <p>I've just started with CanJS.</p>
  
  <p>After viewing a tutorial from <a href="http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/</a> </p>
  
  <p>I was wondering how does contactsList.ejs knows where to place it's data inside index.html? It placed it's data directly inside the  of index.html. </p>
  
  <p>Is there a convention over configuration happening here? Or did I miss out which line of code actually indicate having contactsList.ejs inside that particular div? </p>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Contacts Manager &gt;&gt; Part 2&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
            &lt;h1&gt;Contacts Manager&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="span3"&gt;
            &lt;div class="well"&gt;
              &lt;nav id="filter"&gt;&lt;/nav&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span9"&gt;
            &lt;div id="create"&gt;&lt;/div&gt;
            &lt;div id="contacts"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/can.jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/can.fixture.js"&gt;&lt;/script&gt;
      &lt;script src="js/contacts.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Contact.js (Not all are pasted here as it's quite lengthy)</strong> </p>
  
  <pre><code>Contacts = can.Control({
      init: function(){
          this.element.html(can.view('views/contactsList.ejs', {
              contacts: this.options.contacts,
              categories: this.options.categories
          }));
      }
  });
  
  Filter = can.Control({
      init: function(){
          var category = can.route.attr('category') || "all";
          this.element.html(can.view('views/filterView.ejs', {
              contacts: this.options.contacts,
              categories: this.options.categories
          }));
          this.element.find('[data-category="' + category + '"]').parent().addClass('active');
      },
      '[data-category] click': function(el, ev) {
          this.element.find('[data-category]').parent().removeClass('active');
          el.parent().addClass('active');
          can.route.attr('category', el.data('category'));
      }
  });
  
  $(document).ready(function(){
      $.when(Category.findAll(), Contact.findAll()).then(function(categoryResponse, contactResponse){
          var categories = categoryResponse[0], 
              contacts = contactResponse[0];
  
          new Filter('#filter', {
              contacts: contacts,
              categories: categories
          });
          new Contacts('#contacts', {
              contacts: contacts,
              categories: categories
          });
      });
  });
  Contact.List = can.Model.List({
      filter: function(category){
          this.attr('length');
          var contacts = new Contact.List([]);
          this.each(function(contact, i){
              if(category === 'all' || category === contact.attr('category')) {
                  contacts.push(contact)
              }
          })
          return contacts;
      },
      count: function(category) {
          return this.filter(category).length;
      }
  });
  </code></pre>
  
  <p><strong>contactsList.ejs</strong></p>
  
  <pre><code>&lt;ul class="clearfix"&gt;
      &lt;% list(contacts.filter(can.route.attr('category')), function(contact){ %&gt;
          &lt;li class="contact span8" &lt;%= (el)-&gt; el.data('contact', contact) %&gt;&gt;
              &lt;%== can.view.render('views/contactView.ejs', {contact: contact, categories: categories}) %&gt;
          &lt;/li&gt;
      &lt;% }) %&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>contactView.ejs</strong></p>
  
  <pre><code>&lt;a href="javascript://" class="remove"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;form&gt;
    &lt;div class="row"&gt;
      &lt;div class="span2"&gt;
        &lt;img src="img/contact.png" width="100" height="100"&gt;
      &lt;/div&gt;
      &lt;div class="span3"&gt;
        &lt;input type="text" name="name" placeholder="Add Name" 
          &lt;%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %&gt;&gt;
        &lt;select name="category"&gt;
          &lt;% $.each(categories, function(i, category){ %&gt;
            &lt;option value="&lt;%= category.data %&gt;" &lt;%= contact.category === category.data ? "selected" : "" %&gt;&gt;
              &lt;%= category.name %&gt;
            &lt;/option&gt;
          &lt;% }) %&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="span3"&gt;
        &lt;label&gt;Address&lt;/label&gt;
        &lt;input type="text" name="address" 
          &lt;%= contact.attr('address') ? "value='" + contact.address + "'" : "class='empty'" %&gt;&gt;
        &lt;label&gt;Phone&lt;/label&gt;
        &lt;input type="text" name="phone" 
          &lt;%= contact.attr('phone') ? "value='" + contact.phone + "'" : "class='empty'" %&gt;&gt;
        &lt;label&gt;Email&lt;/label&gt;
        &lt;input type="text" name="email" 
          &lt;%= contact.attr('email') ? "value='" + contact.email + "'" : "class='empty'" %&gt;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>