canjs基础教程之EJS

EJS

EJS是在canjs2.0版本之前是Canjs的默认的模版语言,在2.0之后默认的模版是Mustache/stache,并且canjs对EJS模版的支持知道3.0版本之前.

当和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.就可以直接访问参数的属性.

1. Magic tags

有三种常用的标签:
<% %> 在标签里面可以执行任意的JavaScript代码,该标签不修改也不填充模版.
<%= %> 在标签里面面可以执行JavaScript声明,并且在模版对于的订地方输出Html- escaped 结果.Eg:
模版

My favorite element is

1.<% todos.each(function(todo){%>
 1.    <li><%== can.view.render('todoEJS', todo);%></li>
3.<%});%>

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

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