CanJS - how does the views .ejs get populated at the index.html

StackOverflow https://stackoverflow.com/questions/18290608

  •  24-06-2022
  •  | 
  •  

Question

I've just started with CanJS.

After viewing a tutorial from http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/

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.

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?

Index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Contacts Manager >> Part 2</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <h1>Contacts Manager</h1>
        </div>
      </div>
      <div class="row">
        <div class="span3">
          <div class="well">
            <nav id="filter"></nav>
          </div>
        </div>
        <div class="span9">
          <div id="create"></div>
          <div id="contacts"></div>
        </div>
      </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="js/can.jquery.js"></script>
    <script src="js/can.fixture.js"></script>
    <script src="js/contacts.js"></script>
  </body>
</html>

Contact.js (Not all are pasted here as it's quite lengthy) 

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;
    }
});

contactsList.ejs

<ul class="clearfix">
    <% list(contacts.filter(can.route.attr('category')), function(contact){ %>
        <li class="contact span8" <%= (el)-> el.data('contact', contact) %>>
            <%== can.view.render('views/contactView.ejs', {contact: contact, categories: categories}) %>
        </li>
    <% }) %>
</ul>

contactView.ejs

<a href="javascript://" class="remove"><i class="icon-remove"></i></a>
<form>
  <div class="row">
    <div class="span2">
      <img src="img/contact.png" width="100" height="100">
    </div>
    <div class="span3">
      <input type="text" name="name" placeholder="Add Name" 
        <%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>
      <select name="category">
        <% $.each(categories, function(i, category){ %>
          <option value="<%= category.data %>" <%= contact.category === category.data ? "selected" : "" %>>
            <%= category.name %>
          </option>
        <% }) %>
      </select>
    </div>
    <div class="span3">
      <label>Address</label>
      <input type="text" name="address" 
        <%= contact.attr('address') ? "value='" + contact.address + "'" : "class='empty'" %>>
      <label>Phone</label>
      <input type="text" name="phone" 
        <%= contact.attr('phone') ? "value='" + contact.phone + "'" : "class='empty'" %>>
      <label>Email</label>
      <input type="text" name="email" 
        <%= contact.attr('email') ? "value='" + contact.email + "'" : "class='empty'" %>>
    </div>
  </div>
</form>
Was it helpful?

Solution

I found the line of code, it's inside contact.js 

$(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
    });
});

When creating a new control such as Contact, it will be populated inside the document with id of contacts.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top