码迷,mamicode.com
首页 > 其他好文 > 详细

mustache语法

时间:2018-05-25 13:37:53      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:ges   引擎   oge   参数   angularjs   显示   技术   架构   判断   

Mustache 是一款经典的前端模板引擎,在前后端分离的技术架构下面,前端模板引擎是一种可以被考虑的技术选型,随着重型框架(AngularJS、ReactJS、Vue)的流行,前端的模板技术已经成为了某种形式上的标配

变量

{{person}}

带有HTML的变量

{{{person}}}

循环

{{#persons}}
......
{{/persons}}

数组循环的时候可以用.作为下标
{ "musketeers": ["Athos", "Aramis", "Porthos", "D‘Artagnan"] }
{{#musketeers}}
{{.}}
{{/musketeers}}

对象

正常使用:
{ "name": { "first": "Michael", "last": "Jackson" }, "age": "RIP" }
{{name.first}} {{name.last}}
{{age}}

循环使用:
{ "stooges": [ { "name": "Moe" }, { "name": "Larry" }, { "name": "Curly" } ] }
{{#stooges}}
{{name}}
{{/stooges}}

if else

{{#person}}
......
{{/person}}
{{^person}}
......
{{/person}}

布尔判断

和前面循环的语法是一样的,取决于变量是否是一个数组
{{#person}}
......
{{/person}}

数组的布尔判断

当一个数组没有任何值的时候,可能会希望不做任何的显示,所以需要这个判断
{{#persons.length}}
......
{{/persons.length}}

Lambdas

遇到和前面的循环和布尔表达式一样,取决于参数的类型
{{#person}}
{{name}} is awesome.
{{/person}}

{ "name": "Willy", "person": function() { return function(text, render) { return "<b>" + render(text) + "</b>" } } }

输出
<b>Willy is awesome.</b>

注释

这玩意儿有啥用呢?
{{! ignore me }}

Trick

在做<tr></tr>的循环输出的时候,需要使用类似这样的形式(感觉这就是BUG啊,或者是HTML标准的问题?):
``
<tr> <td>{{name}}</td> <td>{{age}}</td> </tr>

两个核心方法

Mustache.parse(template);
Mustache.render(template, obj);



作者:马文Marvin
链接:https://www.jianshu.com/p/7f1cecdc27e1
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

mustache语法

标签:ges   引擎   oge   参数   angularjs   显示   技术   架构   判断   

原文地址:https://www.cnblogs.com/yeyezhu/p/9087478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!