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. <%})%>