1 初体验

首先先定义一个type="x-tmpl-mustache"的模板脚本并给与一个id

<script id="paginateTemplate" type="x-tmpl-mustache"><p> Hello,{{name}}</p>
</script>

其次再在html页面中定义一个div容器，并给一个id名

<div id="context"></div>

最后再在</body>前写javascript脚本做模板渲染

<script type="text/javascript">var data = { "phone": "iphone" }var Template = $('#paginateTemplate').html();var rendered = Mustache.render(Template,data);$('#context').html(rendered);
</script>

1.1 还可以对象形式做数据源

var data = {"name" : {"first" : "Chen","last" : "Jackson"},"age" : 18
};
var output = Mustache.render("name:{{name.first}} {{name.last}},age:{{age}}", data);
console.log(output);

结果：name:Chen Jackson,age:18

1.2 {{#param}}这个标签很强大，有if判断、forEach的功能。

var data = {"nothin":true
};
var output = Mustache.render(
"Shown.{{#nothin}}Never shown!{{/nothin}}", data);
console.log(output);

结果：如果nothin是空或者null，或者是false都会输出Shown.相反则是Shown.Never shown!。

下面是迭代功能的使用：

var data = {"stooges" : [ {"name" : "Moe"}, {"name" : "Larry"}, {"name" : "Curly"} ]
};
var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}",data);
console.log(output);

输出：Moe
Larry
Curly

1.2.1 如果迭代的是数组，还可以用{{.}}来替代每个元素

var data = {"musketeers" : [ "Athos", "Aramis", "Porthos", "D'Artagnan" ]
};
var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",data);
console.log(output);

输出：
* Athos
* Aramis
* Porthos
* D’Artagnan

1.3 迭代输出的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作

var data = {"beatles" : [ {"firstName" : "John","lastName" : "Lennon"}, {"firstName" : "Paul","lastName" : "McCartney"}, {"firstName" : "George","lastName" : "Harrison"}, {"firstName" : "Ringo","lastName" : "Starr"} ],"name" : function() {return this.firstName + " " + this.lastName;}};var output = Mustache.render("{{#beatles}} *{{name}}{{/beatles}}", data);console.log(output);

9.{{^}}与{{#}}相反，如果变量是null、undefined、 false、和空数组讲输出结果

10.{{! }}注释

Mustache模板学习笔记相关推荐

PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的"章节7:创建TPL自定义模板",做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. ...
C++模板学习笔记——模板实参
对于函数模板,编译器通过隐式推断模板实参.其中,从函数实参来确定模板实参的过程被称为模板实参推断.在模板实参推断过程中,编译器使用函数调用中的实参类型来寻找模板实参,用这些模板实参生成的函数版本与给定 ...
“模板”学习笔记（7）-----数组模板+对象数组举例
我们可以定义一个数组模板,并且利用该模板声明其数组成员.声明的方式非常简单,主需要一下两步: template<class ElementType,int n>; ElementType ...
C++ 函数模板和排序的函数模板——学习笔记
我们在使用重载函数时,只是使用了函数名,而函数体还是得分别定义,在C++中函数模板为我们很好的解决了这个问题. 1.函数模板的声明函数模板可以用来创建一个通用的函数,以支持多种不同的形参,避免重载函 ...
JQuery-No.02 jTemplates模板学习笔记
2019独角兽企业重金招聘Python工程师标准>>> 1.jTemplates工作方式 1)setTemplateElement:指定可处理的模板对象 2)processTempl ...
ACM模板 | 学习笔记树相关
持续更新中qwq 咕咕咕此次update是在我原先自己的博客园博客的基础上进行更新的(隔了两年该忘的不该忘的都忘完了qwq),顺便整理一下我的acm模板QAQ (我保证2021.3.1开学之前搞完! ...
FLASK模板学习笔记
默认配置: template_folder='templates' ----- 模板的默认目录 render_template() -------- (x)html自动转义 render_t ...
ACM模板 | 学习笔记数学相关
正在整理中qwq 欧拉函数求欧拉函数的个数(phi(n)) phi(n)=n∗(1−1p1)∗...∗(1−1pk)phi(n) = n * (1 - \frac{1}{p_1})*...*(1-\ ...
[学习笔记]半平面交
一个直线把平面分成两部分,就是两个半平面处理这两个平面的交的信息,就是半平面交推荐: 计算几何之半平面交算法模板及应用 bzoj 2618 半平面交模板+学习笔记 [总结]半平面交可以用于求任意 ...

Mustache模板学习笔记