Canjs基础教程之Mustach
来源:互联网 发布:上班族做饭知乎 编辑:程序博客网 时间:2024/05/22 13:15
Mustache/Stache是Canjs的模版,Mustache模版看起来平常的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的
<!-- -->
0 0
- Canjs基础教程之Mustach
- canjs基础教程之EJS
- Canjs基础教程之Controls
- canjs基础教程之Components
- canjs基础教程之Route
- Canjs 基础教程之技巧篇
- CanJS基础教程
- JDBC基础教程之PreparedStatement
- JDBC基础教程之概述
- JDBC基础教程之连接
- JDBC基础教程之语句
- JDBC基础教程之PreparedStatement
- JDBC基础教程之CallableStatement
- JDBC基础教程之CallableStatement
- JDBC基础教程之PreparedStatement
- JDBC基础教程之PreparedStatement
- JDBC基础教程之CallableStatement
- JDBC基础教程之概述
- spark-08-spark: local 模式 可调试
- Node.js学习--基础知识(2)--异步IO与事件式编程
- 关于viewpager_indicator_master开源项目使用详解
- 整合springmvc+hibernate+spring事物无法回滚问题
- 如何计算时间复杂度
- Canjs基础教程之Mustach
- 2. 创建多网站和商店(Creating Multiple Websites and Stores)
- 01.MVEL简介
- 常用的排序算法的时间复杂度和空间复杂度
- volley源码解析(二)--Request<T>类的介绍
- 个性化定制statusBar,UINavigationBar背景和颜色
- 02.MVEL基本语法-属性表达式
- 速查表:常用算法和数据结构的复杂度
- 13-06-2015 SQL 笔记