mustache模板
一、简单示例
代码:
1 function show(t) {2 $("#content").html(t);3 }4 5 var view = {6 title: 'YZF',7 cacl: function () {8 return 6 + 4;9 } 10 }; 11 $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));
结果:
YZF spends 10
结论:
可以很明显的看出Mustache模板的语法,只需要使用{{和}}包含起来就可以了,里面放上对象的名称。
通过本示例也可以看出,如果指定的属性为函数的时候,不会输出函数里面的内容,而是先执行函数,然后将返回的结果显示出来。
二、不转义html标签
代码:
1 var view = { 2 name: "YZF", 3 company: "<b>ninesoft</b>" 4 }; 5 show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));
结果:
结论:
通过这个示例可以看出Mustache默认是会将值里面的html标记进行转义的,但是有时候我们并不需要。
所以这里我们可以使用{{{和}}}包含起来,或者是{{&和}}包含,那么Mustache就不会转义里面的html标记。
三、绑定子属性的值
代码:
1 var view = { 2 "name": { 3 first: "Y", 4 second: "zf" 5 }, 6 "age": 21 7 }; 8 show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));
结果:
结论:
相信看到第一个示例的时候,就会有人想到能不能绑定子属性,如果你努力看下去了。
那么祝贺你,现在就是解决你的需求的方式,仅仅只需要通过.来使用子属性即可。
四、条件式选择是否渲染指定部分
代码:
1 var view = { 2 person: false 3 }; 4 show(Mustache.render("eff{{#person}}abc{{/person}}", view));
结果:
结论:
问题总是不断,如果我们还需要能够根据我们给的值,决定是否渲染某个部分。
那么现在就可以解决这个问题,当然还要提示的就是不仅仅是false会导致不渲染指定部分。
null,空数组,0,空字符串一样有效。语法上面比较简单,就是使用{{#key}} ... {{/key}}
来控制中间的内容。
五、循环输出
代码:
1 var view = { 2 stooges: [ 3 { "name": "Moe" }, 4 { "name": "Larry" }, 5 { "name": "Curly" } 6 ] 7 }; 8 show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));
结果:
结论:
仅仅学会上面的方式,大部分地方你都解决了,但是还是会出现麻烦的地方。
就是循环输出,如果你一个一个写,相信会很烦躁,当然Mustache不会让我们失望,
它也给出了如何循环输出的方式,这里是将一个由对象组成的数组输出,如果我们
输出的是数组,就需要使用{{.}}来替代{{name}}。
六、循环输出指定函数处理后返回的值
代码:
1 var view = {2 "beatles": [3 { "firstname": "Johh", "lastname": "Lennon" },4 { "firstname": "Paul", "lastname": "McCartney" }5 ],6 "name": function () {7 return this.firstname + this.lastname;8 }9 }; 10 show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));
结果:
结论:
循环输出是有了,但是我们还想后期进行加工。那么这个完全符合你的需要,因为Mustache会将
数组中的值传递给你的函数,输出你函数返回的值。这里我们可以看到最外层是数组,只要在里面
使用函数那么外层的数组就会作为这个函数的参数传递进去。
七、自定义函数
代码:
1 var view = { 2 "name": "Tater", 3 "bold": function () { 4 return function (text, render) { 5 return render(text) + "<br />"; 6 } 7 } 8 } 9 show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));
结果:
结论:
上面我们都是用的变量作为节,那么我们现在用函数作为节,会有什么效果呢。
它会调用我们函数返回的函数,将节中间的原始字符串作为第一个参数,默认
的解释器作为第二个参数,那么我们就可以自行加工。
八、反义节
代码:
1 var view = { 2 "repos": [] 3 }; 4 show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));
结果:
结论:
上面我们也用节,但是仅仅只能选择是否输出某个部分。所以这里我们弥补一下。
如果我们使用了{{^和}}来定义节的话,那么这个部分只会在里面的值为空,null,
空数组,空字符串的时候才会显示。那么我们就可以实现了if else的效果了。
九、部分模板
代码:
1 var view = {2 names: [3 { "name": "y" },4 { "name": "z" },5 { "name": "f" }6 ]7 };8 var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";9 var name = "<b>{{name}}</b>"; 10 show(Mustache.render(base, view, { user: name }));
结果:
结论:
Mustache虽然节约了很多时间,但是我们定义了很多模板,但是彼此之间无法互相嵌套使用,也会造成繁琐。
所以这里我们还要介绍如何定义部分模板,用来在其他模板里面使用,这里使用其他模板的方式仅仅是{{>templetename}}。
最大的不同就是Mustache.render方法有了第三个参数。
十、预编译模板
代码:
1 Mustache.parse(template); 2 //其他代码 3 Mustache.render(template,view);
结论:
模板既然有好处,也有坏处。就是编译模板需要时间,所以在我们已知会使用某个模板的前提下,我们可以预先编译好这个模板,以便后面的使用。
1. Mustache 概述
Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。
2. Mustache 具体的使用
下面就具体讲一下Mustache的使用。在开始讲之前,需要先从git hub上获取相关的mustache.js文件,获取文件之后,新建一个解决方案,目录如下:
然后就开始具体的使用,首先需要在页面的head标签内引用Jquery.js 和Mustache.js两个脚本文件,主要有以下几个方面(以下演示的方法均在head标签中的script代码块中):
2.1 简单的对象绑定展示
l 代码示例:
[javascript] view plaincopy
- $(function () {
- var user = { name: "Olive", age: 23, sex: "girl" };
- var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex}}";
- var view = Mustache.render(template, user);
- $("#user_info").html(view);
l 页面呈现效果:
l 语法解释:
i. Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}”;
ii. 大括号内的字段名称要和Mustache.render方法中的第二个参数中的对象的属性名一致
iii. 主要的渲染方法为Mustache.render,该方法有两个参数,第一个为要渲染的模版,也就是上例中的template,第二个就是数据源也就是上例中的user对象
2.2 对象数组循环渲染展示
l 代码示例:
[javascript] view plaincopy
- var users = { result: [{ name: "Only", age: 24, sex: "boy" },
- { name: "for", age: 24, sex: "boy" },
- { name: "Olive", age: 23, sex: "girl" }
- ]
- };
- var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
- var views = Mustache.render(template, users);
- $("#users_info").html(views);
l 页面呈现效果:
l 语法解释:
i. 对于对象数据Mustache也有其特殊的语法:{{#}}{{/}},如果所给定的数据源是一个对象数组,则可以使用该语法,很方便的用来循环展示。
ii. 其中{{#}}标记表示从该标记以后的内容全部都要循环展示
iii. {{/}}标记表示循环结束。这种情况多用于table行的展示。
2.3 判断对象为null(false/undefined)展示
l 代码示例:
[javascript] view plaincopy
- var users = { result: [{ name: null, age: 24, sex: "boy" },
- { name: "for", age: 24, sex: "boy" },
- { name: "Olive", age: 23, sex: "girl" }
- ]
- };
- var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{#name}}{{name}}</td><td>{{age}}</td><td>{{sex}}{{/name}}</td></tr>{{/result}}</table><div>";
- var views = Mustache.render(template, users);
- $("#users_info1").html(views);
l 页面呈现效果:
l 语法解释:
i. 上边我们有讲到{{#}}{{/}}这样的语法,除了上边的循环遍历之外,它还有另外的一层意思就是判空,如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现
ii. 在代码示例中,users对象中的第一个对象名为null,所以在展示时,该条用户信息没有被展示。
iii. 有了判空的方法当然还有与之相反的方法{{^}},该方法表示的意思与{{#}}意思相反。
2.4 防止html转义展示
l 代码示例:
[javascript] view plaincopy
- var user = { name: "<h1>Olive</h1>" };
- var template = "my name is {{name}}";
- var view = Mustache.render(template, user);
- $("#user_name").html(view);<span style="line-height:1.5"> </span>
l 页面呈现效果:
如果不在{{}}中加&,则效果如下:
l 语法解释:
i. 在某些时候,我们要绑定的数据源中可能会有一些html标记,如果单纯的采用{{}}这种方式来绑定的话,默认的会将html标记转义。为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。
mustache模板相关推荐
- mustache模板技术
一.简介 Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Ho ...
- Mustache 模板引擎
Mustache 模板引擎 1.Mustache简介 mustache.js 是一个简单强大的 JavaScript 模板引擎.使用mustache前需要通过script标签引入它的js文件,然后 ...
- PHP中如何用switch制作页面,php – 如何在Mustache模板中使用switch case?
我在Core PHP中使用Mustache模板将PHP页面转换为模板.现在我想在模板中使用switch case,如: switch ($gift_card['FlagStatus']) { case ...
- 学习Vue的mustache语法-mustache模板引擎
学习地址 : https://www.bilibili.com/video/BV1EV411h79m?vd_source=a81826692f4afea80764f4048dc1ae0a 代码地址 : ...
- Vue源码之mustache模板引擎(二) 手写实现mustache
Vue源码之mustache模板引擎(二) 手写实现mustache mustache.js 个人练习结果仓库(持续更新):Vue源码解析 webpack配置 可以参考之前的笔记Webpack笔记 安 ...
- Vue源码之mustache模板引擎(一)
Vue源码之mustache模板引擎(一) 个人练习结果仓库(持续更新):Vue源码解析 抽空把之前学的东西写成笔记. 学习视频链接:[尚硅谷]Vue源码解析之mustache模板引擎 模板引擎是什么 ...
- 【Vue源码】mustache模板引擎 - 基本使用 - 底层原理 - 手写实现
文章目录 1. 模板引擎的介绍 1.1 模板引擎是什么? 1.2 模板引擎是怎么来的?(发展历史) 1. 使用原生的DOM操作 2. 使用数组中的join方法 3. 使用ES6反引号的方法 2. mu ...
- mustache模板技术简介
mustache模板技术简介 一.简介 Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 J ...
- Mustache模板技术,一个比freemarker轻量级的模板引擎
一.初识Mustache 同样也是看Dropwizard才知道这个东西的,以前一直是知道诸如freemarker这样的模板引擎,这个是头一次听说,但是听周围的朋友说最早这个东西是出自于JS的,Drop ...
- Mustache 模板教程
Mustache 模板教程 本文学习Mustache 模板,并使用Java api动态生成HTML内容.Mustache是创建动态内的无逻辑模板引擎,如HTML,配置文件等. 1. 概述 Mustac ...
最新文章
- HDU1863(Prim算法)
- pycharm Application cannot start in headless mode
- C++ 中的 #pragma warning(push) 和 #pragma warning(pop)有什么用
- sdoi2015 位图+区间+矩形
- Mysql报too many connections详解
- 2016年安防企业如何因势而动 顺势而为
- 你问我DataX是谁?对不起,我活在Apache SeaTunnel的时代!
- jsp如何跳转java_JSP的三种跳转方式
- QCon-小布助手对话系统工程实践
- chrome浏览器无法访问此网站并且响应时间长的方法
- python保留两位小数_python格式化输出保留2位小数的实现方法
- [转]office2010一直卡在“正在受保护的视图中打开”
- 无线降噪蓝牙耳机评测,南卡、JBL、OPPO、荣耀降噪蓝牙耳机推荐
- Spine动画导入报错 : Could not automatically set the AtlasAsset for “xx“.you may set it manually
- total command关闭按钮如何修改为最小化
- ms dtc 启动失败的解决办法。
- 花式栈溢出值stack smash
- 爬虫天坑系列-百度指数爬虫
- 如何开发一个图像识别图形增强,AI图像转换系统毕业设计毕设作品
- 机械键盘买青轴好还是茶轴好?