我刚刚开始使用 CanJS。
查看 http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs/ 的教程后
我想知道contactsList.ejs如何知道将其数据放置在index.html中的何处？它将数据直接放置在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>
最佳答案
我找到了这行代码，它位于 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
});
});
当创建一个新的控件(例如“联系人”)时，它将在文档中填充联系人 ID。
关于javascript - CanJS - View .ejs 如何填充到 index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18290608/