canjs基础教程之EJS

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?&lt;b&gt;blink&lt;/b&gt;.</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.?<%})%>

canjs基础教程之EJS

原文：http://king-jw.iteye.com/blog/2218662