作者: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.js:JavaScript模板引擎详解** Mustache.js,又称为mustache,是一款轻量级且功能强大的模板引擎,专为JavaScript设计。它遵循“逻辑less”的理念,将视图和数据分离,使得代码更易于理解和维护。...
在给定的标题"JavaScript的mustache模板引擎的一个极其快速和小的子实现"中,我们可以推断这里提到的是一个轻量级的、高效的Mustache实现,可能是针对特定场景进行了优化,例如可能去除了某些非必要的功能,以达到更...
3. "Javascript模板引擎mustache.js详解 - 流云诸葛 - 博客园":该文章深入解析了Mustache.js的工作原理,对于理解其内部机制非常有帮助。 4. "Mustache模板技术,一个比freemarker轻量级的模板引擎 - cnhome的专栏 ...
本文将深入探讨Mustache的基本语法,以JavaScript应用为例,帮助开发者理解和掌握这一强大的模板引擎。 一、Mustache简介 Mustache的核心理念是“logic-less”,即模板中不包含业务逻辑,仅负责展示数据。这意味着...
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 标签:Mustache
JavaScript模板引擎Mustache.js是一种流行的轻量级模板语言,它被广泛用于动态生成HTML或者其他文本格式的文档。本文将深入探讨Mustache.js的基本概念、使用方法及其在实际项目中的应用场景。 Mustache.js遵循...
**Mustache.js:无逻辑的JavaScript模板引擎** Mustache.js 是一个流行的开源JavaScript库,它遵循无逻辑模板语言——Mustache模板语法。这种语法强调在视图层与业务逻辑之间保持分离,使得开发者可以更专注于数据...
主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考...
【标题】"前端开源库-mustache-express"是一个基于JavaScript的模板引擎,它与Express.js框架紧密结合,用于构建动态的Web应用。Mustache是一种逻辑less的模板语言,它的核心理念是“Logic-less templates”,即在...
总之,`template.js`作为一款轻量级的JavaScript模板引擎,提供了一种简便的方法来结合数据和HTML模板,从而生成动态网页内容。通过理解和掌握其核心概念和使用方式,开发者可以在Web开发中更高效地管理数据和视图。
在给定的文件中,我们看到一个基于Vue.js的简单示例,结合了Mustache模板引擎来渲染数据。这里我们将深入探讨Vue.js与Mustache模板语法以及如何将它们结合起来实现动态内容渲染。 首先,Mustache是一种无逻辑的模板...
JavaScript模板在各种场景下都有广泛应用,如: - **服务器端渲染**:在Node.js环境中,可以使用模板引擎生成HTML响应。 - **客户端渲染**:在浏览器端,模板引擎可以用于AJAX请求后动态更新页面。 - **邮件模板**...
在这个例子中,我们将探讨如何使用JavaScript库Mustache.js在ASP.NET MVC项目中实现客户端模板。 Mustache.js是一个无逻辑的模板语言,遵循“逻辑less”的原则,意味着它不包含任何内建的控制流或条件语句。它的...
常见的JS模板引擎有Mustache、Handlebars、EJS等,它们允许开发者编写可复用的HTML片段,提高代码的可读性和维护性。 三、启动加载模板的优势 1. **性能优化**:启动加载模板可以减少网络请求,通过预加载和缓存...
mustache.js-带有JavaScript的无逻辑{{mustache}}模板有什么比没有逻辑更令人敬畏的逻辑呢? 是JavaScript中的模板系统的零依赖实现。 是一种无逻辑的模板语法。 它可以用于HTML,配置文件,源代码-任何东西。 它...
Java 版 mustache.js 的实现Mustache.java构建状态Mustache.java 的设计不允许不受信任的各方提供模板。虽然可以锁定它以安全地提供模板,但默认情况下它是不安全的。请使用 SafeMustacheFactory 并将所有模板和部分...
Hogan.js是一个由Twitter开发的轻量级JavaScript模板引擎,它是对Mustache模板语言的实现。这个库的主要目的是为了提供一种高效且易于理解和使用的数据绑定和逻辑表达方式,用于生成HTML或其他格式的文本。在前端...