Canjs基础教程之Mustach
2015-06-13 23:14
686 查看
Mustache/Stache是Canjs的模版,Mustache模版看起来平常的Html,只是在其中加入了标签(可以取值,计算和简单的逻辑判断等).
先看一个例子
Mustache Template
JavaScript
HTML Result
如果想修改示例中页面的messages的个数,通过修改data的messages属性值即可:
那么页面的结果就是:
Mustache是弱逻辑的模版,目的是尽可能使模版的简单.
显示标签中key属性的值,这里如果会做转义成html操作(escap).
{{{key}}} 和{{&key}}
和{{key}}类似,但不转义
{{#key}} BLOCK {{/key}}
如果key的值为undefined/null/false/”(空串)/,都判断为false.其他的值都理解为true.为true时,显示BLOCK
如果key的值为一个非空数组时,进行一个遍历操作;在BLOCK中可以使用
{{^key}} BLOCK {{/key}}
如果key的值为false,显示BLOCK
{{>key}}
模版嵌套,key的值为模版路径,或ID
{{!key}}
模版中的注释,类似html的
先看一个例子
Mustache Template
<script id="template" type="text/mustache"> <h1>Welcome {{user}}!</h1> <p>You have {{messages}} messages.</p> </script>
JavaScript
var data = new can.Map({ user: 'Tina Fey', messages: 0 }); var template = can.view("#template", data) document.body.appendChild(template);
HTML Result
<h1>Welcome Tina Fey!</h1> <p>You have 0 messages.</p>
如果想修改示例中页面的messages的个数,通过修改data的messages属性值即可:
data.attr('message', 5)
那么页面的结果就是:
<h1>Welcome Tina Fey!</h1> <p>You have 5 messages.</p>
Mustache是弱逻辑的模版,目的是尽可能使模版的简单.
标签
{{key}}显示标签中key属性的值,这里如果会做转义成html操作(escap).
{{{key}}} 和{{&key}}
和{{key}}类似,但不转义
{{#key}} BLOCK {{/key}}
如果key的值为undefined/null/false/”(空串)/,都判断为false.其他的值都理解为true.为true时,显示BLOCK
如果key的值为一个非空数组时,进行一个遍历操作;在BLOCK中可以使用
{{.}}获取当前遍历的值,这种使用有限制,数组只能是简单类型的数组(字符串/数字等).
{{^key}} BLOCK {{/key}}
如果key的值为false,显示BLOCK
{{>key}}
模版嵌套,key的值为模版路径,或ID
{{!key}}
模版中的注释,类似html的
<!-- -->
相关文章推荐
- 再转JavaScript的原型
- jsp——学习篇:简单使用JavaScript
- 使用JavaScript实现ajax
- JSP的7个动作指令
- JSP的三个编译指令
- JSON学习笔记(总结自w3school)
- localForage——轻松实现 Web 离线存储
- js小结(一)
- js递归实现包名转换成对应的json对象
- Extjs4.2 表格动态数据加载,以及动态选择分页条目,前后台详解
- 解析JSON的过程
- JavaScript控制XML文件数据
- JSP常见知识点
- JavaScript产生标识符方式的演变
- JavaScript页面跳转
- js浏览器兼容性问题
- JS操作GridView,JS获取table的td中的值跟控件
- JS懒加载
- JS字符串的一些常用方法
- 基于JSP的登陆验证码