EJS
EJS是Canjs的默认的模版语言,当和Observes一起使用时可以提供Live bind.如下一个EJS模版示例:
1.<script type="text/ejs" id="todoList">
2.<%for(var i =0; i < todos.length;++i){%>
3. <li><%=this[i].attr('description')</li>
4.<%}%>
5.</script>
可以使用can.view渲染模版,使用方式如下:
1.Todo.findAll({},function(todos){
2. document.getElementById('list')
3. .appendChild(can.view('todoList', todos));
4.});
从给出的示例中我们可以看到,在模版中可以使用this来访替代参数todos,EJS也可以不用添加前缀this.就可以直接访问参数的属性.
Magic tags
有三种常用的标签:
<% %> 在标签里面可以执行任意的JavaScript代码,该标签不修改也不填充模版.
<%= %> 在标签里面面可以执行JavaScript声明,并且在模版对于的订地方输出Html- escaped 结果.Eg:
模版
<div>My favorite element is <%='<b>blink</b>'%>.</div>
输出的结果:
<div>My favorite element is <b>blink</b>.</div>
<%== %> 在标签里面面可以执行JavaScript声明,并且在模版对应的地方输出原始 结果.
模版
<div>My favorite element is <%=='<b>blink</b>'%>.</div>
输出的结果:
<div>My favorite element is <b>blink</b>.</div>
这种标签常用于模版中嵌套模版:eg
1.<% todos.each(function(todo){%>
2. <li><%== can.view.render('todoEJS', todo);%></li>
3.<%});%>
Live binding
Live binding会在用于填充模版的Date(Observes)有变化时自动更新嵌入在DOM中EJS模版内容,在模版中使用attr访问Data的属性.
注意:数组的Livebinding 要使用 data.each方式去循环遍历
错误写法:
1.<%for(var i =0; i < todos.length;++i){%>
2. <li><%= todos[i].attr('name')%></li>
3.<%}%>
正确写法:
1.<% todos.each(function(){%>
2. <li><%= todo.attr('name')%></li>
3.<%});%>
Element callbacks
当<%= %> 或 <%==%>标签里面定义的是一个方法时,那么该方法将会执行,方法的第一个尝试是包裹该标签的元素.这常用于如下形式:
<img src="a.gif"<%=function(e){e.style.display='none';}%>/>
并且当方法内语句就是一个单行的时候可以简写成
1. <div <%= ( element ) ->element.style.display = 'none' %> >
2. Test
3. </div>
通常来说这个功能是让你能够将对象缓存在这个element上：
1. <div <%= ( el ) ->el.data('student', student) %> >
2. Test
3. </div>
然后如果用户点击这个div的时候我们就能很容易的得到其对应的Model实例
1. $('div').click(function() {
2. var student = this.data('student');
3. // TODO:some other logic.
4. })
1. <% todos.each(function(todo){%>
2. <li <%=(el)-> can.data(el,'todo', todo)%>>
3. <%= todo.attr('description')%>
4. </li>
5. <%})%>