前端轻量级MVC框架CanJS详解_其它(2)
复制代码 代码如下: % list(contacts, function(contact){ % list()方法里的回调方法如果配合配置有观察者的list使用时，一旦list的数据发生改变就运用动态绑定重复
复制代码 代码如下:
<% list(contacts, function(contact){ %>
list()方法里的回调方法如果配合配置有观察者的list使用时，一旦list的数据发生改变就运用动态绑定重复调用。
复制代码 代码如下:
<li class="contact span8" <%= (el)-> el.data('contact', contact) %>>
以上代码通过元素的回调方法生成 一个有联系人数据的<li>。 箭头后的方法执行后将el对象的数据设置给对应的元素。
复制代码 代码如下:
<%== can.view.render('views/contactView.ejs', {
contact: contact, categories: categories
}) %>
以上代码将子模板contactView.ejs 渲染成一个联系人。 can.view.render() 以模板和数据为参数返回HTML。
渲染单个联系人
子模板是一个将view组织成可管理块的好办法。 同时也使你的模板简单和易于重用。教程后面将会用到此模板来创建联系人，将下面的代码保存为contactView.ejs 进 views 文件夹：
复制代码 代码如下:
<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>
联系人的属性都放入了 <input> 标签里，这就可以编辑更新用户的资料。
活化你的View（好文艺。。）
EJS 处理模板过程中如果有用到attr() ，它周围的代码将会交由事件处理器管理，监听对应属性的变化，当属性发生变化，APP中关联的UI将会被更新。这功能利益于模板动态绑定机制，EJS的动态绑定是有选择性的，只有使用了attr()时才会为对应的属性开启。
我们通过 contactView.ejs 中一个<input>标签来了解它的用法：
复制代码 代码如下:
<input type="text" name="name" placeholder="Add Name"
<%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>
特殊标记里的代码将转变成事件绑定到此联系人的name属性上。当name属性发生变化，事件将被触发同时HTML结构会被更新。
使用can.Control来处理业务逻辑
精彩图集
精彩文章