CanJS - как представления .ejs заселяются в index.html

Я только что начал с CanJS.CanJS - как представления .ejs заселяются в index.html

После просмотра урока из http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/

Я задавался вопросом, как же contactsList.ejs знает, где разместить свои данные в index.html? Он разместил данные непосредственно внутри index.html.

Существует ли конвенция о конфигурации здесь? Или я пропустил, какая строка кода на самом деле указывает на наличие контактовList.ejs внутри этого конкретного 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 (Не все наклеены здесь, как это довольно длительный)

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>

источник

2013-08-17 Steve Ng

Я нашел строку кода, он внутри 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 
    }); 
});

При создании нового элемента управления, таких как контакт, он будет заполнен внутри документа с идентификатор контактов.

источник

2013-08-18 06:04:47

Независимо от того, что вы передаете что-то вроде 'new Contacts (selector или jQuery element)' будет доступно как 'this.element' в элементе управления, и здесь будет заселен вид. – Daff

CanJS - как представления .ejs заселяются в index.html

ответ

Смежные вопросы