CanJS -보기 .ejs가 index.html에 채워지는 방식

저는 CanJS를 시작했습니다.CanJS -보기 .ejs가 index.html에 채워지는 방식

내가 contactsList.ejs 어디 index.html을 내부에 그것의 데이터를 배치하는 알고 않습니다 궁금 해서요 http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/

에서 자습서를 본 후? 그것은 그것의 데이터를 index.html의 내부에 직접 두었다.

구성에 대한 규칙이 있습니까? 아니면 어떤 코드 행이 실제로 해당 div 안에 contactsList.ejs가 있음을 나타내는 지 놓쳤습니까?

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

내가 코드 줄을 발견, 같은 연락처로 새 컨트롤을 만들 때 내부

$(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.js 것, 그것은 문서와 내부에 채워집니다 이드의 연락처.

출처

2013-08-18 06:04:47

'new Contacts (selector or jQuery element)와 같은 것에 전달하는 것은 Control에서 'this.element'로 액세스 할 수 있으며 뷰가 채워지는 위치입니다. – Daff

CanJS -보기 .ejs가 index.html에 채워지는 방식

답변

관련 문제