小白教程
所有教程
关于
Search
172.69.6.208
172.69.6.208
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Mustache模版中文文档”的源代码
本页内容
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
__TOC__ == 简介 == mustache是一个无逻辑的模版规范语言,可以让后端代码和前端表现分离开,和PHP的[https://www.smarty.net/ Smarty],Java的[https://freemarker.apache.org/ FreeMarker], Python的[https://jinja.palletsprojects.com/en/3.1.x/ Jinja]类似。不同的是由于语法简单,被许多编程语言所支持,很多需要进行逻辑分离的项目也采用了Mustache比如MediaWiki的皮肤<ref>https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWiki_skin/en</ref>。 == 支持语言 == 点击链接可以查看对应语言的Mustache库。 [https://github.com/mustache/mustache Ruby], [https://github.com/janl/mustache.js JavaScript], [https://github.com/noahmorrison/chevron Python], [https://github.com/mojombo/mustache.erl Erlang], [https://github.com/schultyy/Mustache.ex Elixir], [https://github.com/bobthecow/mustache.php PHP], [https://github.com/pvande/Template-Mustache Perl], [https://github.com/softmoth/p6-Template-Mustache Raku], [https://github.com/groue/GRMustache Objective-C], [https://github.com/spullara/mustache.java Java], [https://github.com/StubbleOrg/Stubble C#/.NET], [https://github.com/samskivert/jmustache Android], [https://github.com/no1msd/mstch C++], [https://github.com/cfengine/core CFEngine], [https://github.com/cbroglie/mustache Go], [https://github.com/Olivine-Labs/lustache Lua], [https://github.com/joshthecoder/mustang ooc], [https://github.com/hyakugei/mustache.as ActionScript], [https://github.com/pmcelhaney/Mustache.cfc ColdFusion], [https://github.com/scalate/scalate Scala], [https://github.com/fotoetienne/cljstache Clojure[Script]], [https://github.com/fhd/clostache Clojure], [https://github.com/vspy/mustache Fantom], [https://github.com/pvande/Milk CoffeeScript], [https://github.com/repeatedly/mustache-d D], [https://github.com/JustusAdam/mustache Haskell], [https://github.com/dscape/mustache.xq XQuery], [https://github.com/nagaozen/asp-xtreme-evolution/blob/master/lib/axe/classes/Parsers/mustache.asp ASP], [https://github.com/mil/mustache.io Io], [https://github.com/valotas/mustache4dart Dart], [https://github.com/nadako/hxmustache Haxe], [https://github.com/synopse/dmustache Delphi], [https://github.com/rcherrueau/rastache Racket], [https://github.com/nickel-org/rust-mustache Rust], [https://github.com/rgrinberg/ocaml-mustache OCaml], [https://github.com/groue/GRMustache.swift Swift], [https://github.com/tests-always-included/mo Bash], [https://github.com/jverzani/Mustache.jl Julia], [https://github.com/edwindj/whisker R], [https://github.com/MakeNowJust/crustache Crystal], [https://github.com/kanru/cl-mustache/ Common Lisp], [https://github.com/fenekku/moustachu Nim], [https://github.com/noha/mustache Pharo], [https://github.com/ianka/mustache.tcl Tcl], [https://gitlab.com/jobol/mustach C], [https://github.com/sbcgua/abap_mustache ABAP], [https://github.com/truqu/elm-mustache Elm], [https://github.com/cashapp/barber Kotlin], and for [https://github.com/microtangents/sql-mustache SQL] == 支持编辑器 == * [https://gist.github.com/323624 TextMate] * [https://github.com/mustache/vim-mustache-handlebars Vim] * [http://web-mode.org Emacs] * [https://github.com/bobthecow/Mustache.mode Coda] * [https://github.com/atom/language-mustache Atom] == Demo == 下面是一个Javascript的例子,你可以直接在浏览器中尝试Mustache模版,快速学习掌握! <sample title="" desc="" hererun="s1"> <html> <script> function renderHello() { var template = document.getElementById('template').innerHTML; var rendered = Mustache.render(template, // 编辑这里的数据看看 { name: 'Luke' } ); document.getElementById('target').innerHTML = rendered; } window.onload = function(){ renderHello()} </script> <body > <script id="template" type="x-tmpl-mustache"> Hello {{ name }}! </script> <div id="target">Loading...</div> <script src="https://unpkg.xiaobai.wang/mustache@latest"></script> </body> </html> </sample> 你可以将下面的例子复制到上面代码中执行试试看。 <sample title="模版" desc="" lang="html"> <h1>{{header}}</h1> {{#bug}} {{/bug}} {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}} {{#empty}} <p>The list is empty.</p> {{/empty}} </sample> <sample title="数据" desc=""> { "header": "Colors", "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ], "empty": false } </sample> <sample title="渲染后的结果" desc=""> <h1>Colors</h1> <li><strong>red</strong></li> <li><a href="#Green">green</a></li> <li><a href="#Blue">blue</a></li> </sample> == 标签类型 == <nowiki> 通过上面的例子可以看出,Mustache是“无逻辑”,因为没有 if、else或 for 循环。其只有标签。因为只有标签所以很多逻辑都需要在你使用的编程语言中提前处理好,然后再进行渲染。 Mustache 可用于 HTML、配置文件、源代码——任何东西。它通过使用Hash或对象中提供的值扩展模板中的标签来工作。 标签由花括号表示。{{name}}是一个标签,就像{{#name}}. 在demo中,我们都将其name称为键或标签键。下面介绍标签的类型。 </nowiki> === 变量(Variable) === <nowiki> 最基本的标签类型是变量。基本模板中的{{name}}标签将尝试在当前上下文中查找name key。如果没有name key,则将递归检查父上下文。如果到达顶部上下文name但仍未找到该key,则不会呈现任何内容。 默认情况下,所有变量都是 HTML 转义的。如果要返回未转义的 HTML,请使用3个花括号:{{{name}}}。 您还可以使用&来取消转义变量:{{& name}}. 这在更改分隔符时可能很有用(请参阅下面的“设置分隔符”)。 默认情况下,变量没有则返回一个空字符串。这通常可以在你的 Mustache 库中进行配置。例如,Ruby 版本的 Mustache 支持在这种情况下抛出异常,及时发现代码中的BUG。 </nowiki> <sample title="模版" desc=""> * {{name}} * {{age}} * {{company}} * {{{company}}} </sample> <sample title="数据" desc=""> { "name": "Chris", "company": "<b>GitHub</b>" } </sample> <sample title="结果" desc=""> * Chris * * <b>GitHub</b> * <b>GitHub</b> </sample> === 区域 Sections === <nowiki> 一个sesion已#开头,以/结尾。也就是说, {{#person}}开始一个“person” section,同时{{/person}}结束它。 </nowiki> === 错误值或空列表 === 该部分的行为key对应的value决定。如果person存在且值为 false 或为空列表,则不会显示井号和斜杠之间的 HTML <sample title="模版" desc=""> Shown. {{#person}} Never shown! {{/person}} </sample> <sample title="数据" desc=""> { "person": false } </sample> <sample title="结果" desc=""> Shown. </sample> ==== 非空的列表 ==== 如果person存在并且具有非 false 值,则井号和斜线之间的 HTML 将被渲染并显示一次或多次。当值为非空列表时,块中的文本将针对列表中的每项显示一次。section的上下文将被设置为每次迭代的当前项。通过这种方式,我们可以遍历集合。 <sample title="模版" desc=""> {{#repo}} <b>{{name}}</b> {{/repo}} </sample> <sample title="数据" desc=""> { "repo": [ { "name": "resque" }, { "name": "hub" }, { "name": "rip" } ] } </sample> <sample title="结果" desc=""> <b>resque</b> <b>hub</b> <b>rip</b> </sample> ==== 函数 Lambdas ==== <nowiki> 当值函数或 lambda 的时候,渲染的时候会将包含的文本块传递进去同时将返回值当做结果进行渲染,通过这种方式,可以实现过滤器或缓存,扩展更多的复杂功能。 </nowiki> <sample title="模版" desc=""> {{#wrapped}} {{name}} is awesome. {{/wrapped}} </sample> <sample title="数据" desc=""> { "name": "Willy", "wrapped": function() { return function(text, render) { return "<b>" + render(text) + "</b>" } } } </sample> <sample title="结果" desc=""> <b>Willy is awesome.</b> </sample> ==== 非假值 (Non-False Values) ==== 当值不是false的时候就会渲染其包含的字段。下面的例子是person不为false则渲染其包含的文本块和其中的name字段。 <sample title="模版" desc=""> {{#person?}} Hi {{name}}! {{/person?}} </sample> <sample title="数据" desc=""> { "person?": { "name": "Jon" } } </sample> <sample title="结果" desc=""> Hi Jon! </sample> ==== 注释 Comments ==== 注释以感叹号开头并会在渲染的时候被忽略。 <sample title="模版" desc=""> <h1>Today{{! ignore me }}.</h1> </sample> <sample title="结果" desc=""> <h1>Today.</h1> </sample> ==== 组件 Partials ==== Partials语法为<nowiki>{{> box}}</nowiki>, 通过Partials可以将复用的代码进行抽象。 <sample title="模版" desc=""> base.mustache: <h2>Names</h2> {{#names}} {{> user}} {{/names}} user.mustache: <strong>{{name}}</strong> </sample> <sample title="等价模版" desc=""> <h2>Names</h2> {{#names}} <strong>{{name}}</strong> {{/names}} </sample> 可以看出数据可以被传递到Partials中去,你只需要把你代码中经常被用的给复制到单独的模版中去,比如header,footer,sidebar等。 [[Category:Mustache中文教程]]
返回至“
Mustache模版中文文档
”。