首页 > > 网页制作 > css >

mustache语法

2018-06-24 00:32:05来源：未知阅读 ()

mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下，我们可以通过改变传入参数来进行判断】跟小白我来看看该模板的语法吧。

Mustache 的模板语法很简单，就那么几个：

    {{data}}
    {{#data}} {{/data}}
    {{^data}} {{/data}}
    {{.}}
    {{<partials}}
    {{{data}}}
    {{!comments}}

借助 Demo 来对语法做简单的介绍：

 1 ...
 2 <script type="text/javascript" src="mustache.js"></script>
 3 <script type="text/javascript">
 4 var data = {
 5     "name": " xiaohua ",
 6     "msg": {
 7         "sex": " female ", 
 8         "age": " 22 ", 
 9         "hobit": " reading "
 10     },
11     "subject": ["Ch","En","Math","physics"] 
12   }  
13 
14   var tpl = '<p> {{name}}</p>'; 
15   var html = Mustache.render(tpl, data);
16 
17　　alert ( html );
18 </script>
19 ...

{{}}就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值，例如：

1 var tpl = '{{name}}';
2 var html = Mustache.render(tpl, data);
3 //输出：
4 xiaohua

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如改写下 Demo 中的 tpl：

1 var tpl = '{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}';
2 var html = Mustache.render(tpl, data);
3 
4 //输出：
5 <p> female, 22, reading</p>

注意：如果{{#data}} {{/data}}中的 data 值为 null, undefined, false；则不渲染输出任何内容。

该语法与{{#data}} {{/data}}类似，不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。

1 var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
2 var html = Mustache.render(tpl, data);
3 //输出：
4 没找到 nothing 键名就会渲染这段

{{.}}表示枚举，可以循环输出整个数组，例如：

1 var tpl = '{{#subject}} <p>{{.}}</p> {{/subject}}';
2 var html = Mustache.render(tpl, data);
3 //输出：
4 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>

以>开始表示子模块，如{{> msg}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

 1 var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>"
 2 var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}
 3 var html = Mustache.render(tpl, data, partials);
 4 //输出：
 5 <h1>xiaohua</h1>
 6 <ul>
 7    <li>female</li>
 8    <li>22</li>
 9    <li>reading</li>
10 </ul>

{{{data}}}

{{data}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}，例如：

1 var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}'
2 //输出：
3 <p>22</p>

!表示注释，注释后不会渲染输出任何内容。

1 {{!这里是注释}}
2 //输出：

在工作中，如果页面上的内容是从后台获取数据并渲染到页面上时，我们就可以使用mustache模板了，值得注意的是，render的数据一定要与键名相符合。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：【读书笔记《Bootstrap 实战》】6.单页营销网站

下一篇：【转】你所不知道的HTML <head/> 头标签

sass基础语法--变量和引用+变量作用域+import 2020-03-29
HTML元素语法和嵌套规则及注意事项 2020-03-25
markdown基本语法 2020-02-29
html基本介绍,了解html与css,html语法和结构 2020-02-28
css基本概念与css核心语法介绍 2020-02-13

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签

mustache语法

{{data}}

{{#data}} {{/data}}

{{^data}} {{/data}}

{{.}}

{{>partials}}

{{{data}}}

{{!comments}}