作者:zccst
模板:
1)js模板可以是一个html文件。
模板文件.html
<h1>Hello {{name}}, it is {{timeNow}}.</h1>
2) js模板可以是一个值是html代码的js变量
var template = "<p>Hello {{name}}, it is {{timeNow}}.</p>";
3) js模板可以是一个script片段
<script id="tpl-greeting" type="text/html">
<dl>
<dt>Name</dt>
<dd>{{name}}</dd>
<dt>Time</dt>
<dd>{{timeNow}}</dd>
</dl>
</script>
mustache模板语言。
变量表示:变量标记将当前上下文的变量通过模板渲染,如果当前上下文不存在该变量,则渲染为空串。
默认变量会被经过 HTML 编码处理,如需显示原始值,用三个大括号或者在模板标记的初始加入 & 符号。
{{变量名 }} ,{{{变量名 }}}
如果当前键为基本或对象,则渲染一次,如果为数组,则渲染数组长度次数。节点以 # 号开始,以 / 结束。
模板:{{#stooges}}<b>{{name}}</b><br>{{/stooges}}"
json: {"stooges":[{"name":"王升"},{"name":"梁文彦"},{"name":"石洋"}]};
2.填充数组节点以 # 号开始,以 / 结束,则渲染数组长度次数。
模板{{#数组}}{{数组内的key}}{{/数组}}
var template = "{{#stooges}}<b>{{name}}</b><br>{{/stooges}}";var view = {"stooges":[{"name":"王升"},{"name":"梁文彦"},{"name":"石洋"}]}
3.函数作为模板的变量,该函数会在当前列表的每一个元素的上下文迭代执行。
var template = "{{#beatles}}* {{name}}<br/>{{/beatles}}";
var view = {
"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 template = "{{#bold}}Hi {{name}} {{lastName}}.{{/bold}}";
var view = {
"name": "John",
"lastName": "Lennon",
"bold": function () {
return function (text, render) {return "<b>" + render(text) + "</b>";}
}
}
mustache模板使用
模板变量在上下找模板变量需要的数据进行填充。json数据的key跟模板的变量对应就会填充。模板变量和json的key对应不上就不填充。生成展示代码没填充的变量不显示
用Mustache.render(template, view)方法填充数据生成展示代码
view:为json数据,作为模板上下文
template:为模板对象
//模板
var template = "<p>Hello {{name}}, it is {{{ignore name}}}.it is {{&name}}</p>";
//数据
var date = new Date();
var view = {name: "<b>Jonny</b>",timeNow: date.getHours() + ':' + date.getMinutes() };
使用模板文件要用该方法填充数据生成展示代码
$.get('模板文件', function(templates) {
var template = $(templates).html();
$Mustache.render(template, view);
});
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用。 本资源包含了mustache.js 、mustache.min.js包 版本号v2.2.1
Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。
JavaScript的{{mustache}}模板引擎的一个极其快速和小的子实现
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 标签:Mustache
Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在javascript、PHP、Python、Perl 等多种编程语言中
主要为大家介绍了Javascript模板引擎mustache.js,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,需要的朋友可以参考下
主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...
前端项目-mustache.js,无逻辑胡须带javascript的模板
mustache.js-带有JavaScript的无逻辑{{mustache}}模板有什么比没有逻辑更令人敬畏的逻辑呢? 是JavaScript中的模板系统的零依赖实现。 是一种无逻辑的模板语法。 它可以用于HTML,配置文件,源代码-任何东西。 它...
客户端模板技术。增加html代码的可维护性。高效转换Html代码。
mustache.js是JavaScript中的mustache模板系统的零依赖实现。 小胡子是一种无逻辑的模板语法。 它可以用于HTML,配置文件,源代码-任何东西。 它通过使用散列或对象中提供的值在模板中扩展标签来工作。 我们称其为...
通过 mustache 解析它(有一个小的变化来处理绑定到数组) 使用 dojo 呈现它 通过 setter 和 getter 将 dom 绑定到类属性 连接 dojo 细节,例如 attachpoint 和 attachevent 当给定的属性更改时,部分重新渲染所需...
artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎...
templayed.js 是一个兼容 Mustache 的 JavaScript 模板引擎,速度最快,体积最小。 性能比较: 标签:templayed
DustJS 是一个支持浏览器和 Node.js 的异步模板引擎。特点:async/streaming operationbrowser/node compatibilityextended Mustache/ctemplate syntaxclean, low-level APIhigh performancecomposable templates ...
grunt-mustache-hogan-html 使用通用的基本布局从Mustache模板的已定义结构编译静态HTML文件。 结果,您获得了可以相互链接的多个HTML页面:一个有效HTML click-dummy 。 页面可以在文件夹中呈现。 可以为每个文件夹...
目录结构publicindex.html :演示代码在此处,网页的入口src :核心代码js:mustache的实现源代码lookup.js: 函数mustache.jspaseTemplate2tokens.js:将模板转换成tokensrenderTemplate.js:将tokens转换为dom,并...
template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。https://github.com/aui/artTemplate 1、特性 ...