Canjs基础教程之Mustach

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的<!-- -->