作者:zccst
jquery.mustache是用jQuery做了一层封装,提供了以下几个方法,让模板使用更便捷。
参考地址:
https://github.com/jonnyreeves/jquery-Mustache
1,添加模板的三种方式
add,
addFromDom
addFromString
可以直接添加模板,无论是作为字符串文字或引用其他的DOM元素
(1)template 是字符串直接量
//add仅仅是把template添加到当前页面,注意并没有渲染
$.Mustache.add('string-template', '<p>Hi, {{name}}, this is an inline template<p>');
(2)引用DOM元素 addFromDom
// 两者是相同的,后者有更简洁的语法 These two are identical, the latter just provides a terser syntax.
$.Mustache.add('dom-template', $('#dom-template').html());
$.Mustache.addFromDom('dom-template');
如果你更愿意将模板存储在DOM中(假设从外部文件载入它们),此时你可以仅调用
$.Mustache.addFromDom(),不用任何参数,这样的话将读取你模板中所有<script type="text/html" />块。
(3)载入外部模板(html文件),然后渲染
a, 不依赖模块化的情况,直接使用自带的 $.Mustache.load() 方法
var viewData = { name: 'Jonny' };
$.Mustache.load('./templates/greetings.htm').done(function () {
$('body').mustache('simple-hello', viewData);
});
在上面的例子中,我们载入了外部模板(html文件),一旦载入成功,就渲染他里面的元素。
外部模板应该定义在script标签块中,script标签快的id将用来作为模板名称,本例中是simple-hello
// 详见下面
./templates/greetings.htm源码
<script id="simple-hello" type="text/html">
<p>Hello, {{name}}, how are you?</p>
</script>
b, 依赖模块化的情况,先使用require载入文件,再使用mustache读取文件内容(addFromString)
//1,准备工作
require('jQueryMustache');
var tpl = require("crownSheetTpl");
$.Mustache.addFromString(tpl);
//2,使用
this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model);
2,渲染的两种方式
(1)全局的 $.Mustache.render() 方法
$.Mustache.render('my-template', viewData);
返回一个字符串(渲染后的模板内容)
(2)jQuery的mustache选择器
$("#someElement").mustache('my-template', viewData);
返回一个jQuery选择器链接。
这种方式默认的是将渲染后的模板内容追加到DOM选择器元素中,但是你仍然可以改变这种行为,通过传递一个可选的method参数。
// Replace the contents of #someElement with the rendered template.
$('#someElement').mustache('my-template', viewData, { method: 'html' });
// Prepend the rendered Mustache template to #someElement.
$('#someElement').mustache('my-template', viewData, { method: 'prepend' });
mustache选择器也允许你传一个模型数组,这使得你渲染数组变成轻而易举的事
(The mustache selector also allows you to pass an Array of View Models to render which makes populating lists a breeze:)
// Clear #someList and then render all the viewModels using the list-template.
var viewModels = [
{ name: 'Jonny' },
{ name: 'nock' },
{ name: 'lucy' }
];//注意是数组。
$('#someList').empty().mustache('list-template', viewModels);
首先清除someList的内容,然后用数组viewModels渲染到列表模板list-template中。
3,根据调试等需要的其他方法,如templates(), add(), clear()
为了便于调试,你可以使用$.Mustache.templates()方法获取所有注册的模板。
//查看已add的所有模板
console.log($.Mustache.templates());
//查询某一个模板是否存在
console.log($.Mustache.has('string-template'));
//你可以调用$.Mustache.clear清除所有模板
$.Mustache.clear(); //清除所有已add的模板,变空了
//经测试,已经空了
console.log($.Mustache.templates());
4,最后,支持部分渲染 partials,只需要保证被提前载入
$.Mustache.load('./templates/templates.htm').done(function () {
// 渲染`webcontent`模板 和 `footer-fragment`子模板.
$('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' });
});
// 详见下面
./templates/templates.htm源码
<script id="footer-fragment" type="text/html">
<p>© Jonny {{year}}</p>
</script>
<script id="webcontent" type="text/html">
<h1><blink>My {{adjective}} WebSite!</blink></h1>
{{! Insert the `footer-fragment` template below }}
{{>footer-fragment}}
</script>
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
jQuery-Mustache-用于Mustache.js的jQuery插件是一个jQuery插件,它通过一点jQuery魔术使使用Mustache模板引擎的工作变得轻松。安装jQuery-Mustache有两个依赖项: 1.5或更高版本。 0.4或更高版本。 与所有jQuery...
kettu, 用 jQuery Sammy和 mustache 重写传输网络客户端 kettu使用 jquery 和 mustache.js Port http://github.com/kjg/derailleur 和原始传输网络客户机的端口。kettu osaa monta asiaa 。谢谢典雅设计的k
Mustache是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手。
一个node.js模块,用于将JavaScript模板(例如mustache或jQuery.tmpl)预编译为一个文件。 您可以预编译一些静态小胡子,hogan.js,jQuery.tmpl,underscore.js或任何其他模板,并将它们包含在生成的javascript...
Mustache.js (by Boris Yankov) Node.js (from TypeScript samples) node_redis (by Boris Yankov) node_zeromq (by Dave McKeown) node-sqlserver (by Boris Yankov) Numeral.js (by Vincent Bortone) ...
在页面上包含 mustache.js、underscore.js 和 livelist.js 在应用程序的 javascript/coffeescript 文件中,创建一个 livelist: javascript $(document).ready(function(){ list = new LiveList({ global: { ...
jQuery Chevron 是一个 jQuery 扩展,它包装了 mustache js 模板功能,允许您将模板存储在单独的文件中,而不是将它们嵌入到 html 中。 用法 假设您有以下简单模板,名为“template.mustache”: Hello {{place}}...
依赖于 Bootstrap、jQuery 和 MustacheJS 文档 modal-opener.js init(params) params = {title: string 可选(标题将显示在模态中), id_modal:需要的字符串(用于识别模态的 html id), 淡出效果:布尔值,可...
确保您还添加了jQuery和Mustache.js库。 < head > < script type =" text/javascript " src =" https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js " > </ script > < script...
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 3. jSmart jSmart 是著名的 PHP 模板引擎 Smarty...
- JavaScript文件(.js)共80个,主要负责实现前端的动态交互效果; - Mustache模板文件(.mustache)共65个,用于构建前端页面; - 文本文件(.txt)共62个,可能包含配置信息或日志等; - 编译后的Python文件(....
资源里包括:json.js,json2.js,json3.js,json3-mini.js,jquery-3.3.1.mini.js,echarts.js,mustache.js等,其中json类的js是解析js使用的,其中json.js在网上很难找
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 标签:Mustache
Instagram-Infinite-Scroll, 使用 Ractive.js, jQuery和纯CSS构建一个页面无限滚动应用程序 Instagram 无限滚动演示工具Instagram 无限种子Instagram 使用Ractive来呈现带有 Instagram 图像数据的mustache html模板...
与远程服务器通信处理与远程服务器通信的Web服务... AsyncFetchMustache.html-使用新版本的ECMAScript,利用fetch / async await和一个很酷的库Mustache.js来通过模板解析生成的json。 具有一些非常酷的功能。
该死的小JS扫描仪 该死的小型JS...ui-dialog , jquery-ui-tooltip , jquery.prettyPhoto , mustache , plupload , prototypejs , sessvars , YUI 。 作为可选设置,它支持HTTP代理以及HTTP标头值User-Agent ,
聊天应用一个node.js + express.js + socket.io聊天应用程序。 使用某些jQuery + mustache.js模板引擎构建的前端。演示版试用现场。
时钟应用程序是使用 Ember.js MVC 框架开发的,并使用 HTML5、CSS3、JavaScript 和 jQuery 进行编码。 Ember.js 使用 Handlebars 模板语言,它扩展了 Mustache 模板语法。 它使用纯 HTML 表达式并使用良好的语义...
这是一个用于天气预报的小型 jQuery 小部件,使用 jQuery、Mustache、CSS 和 HTML 的组合制作,并与 Grunt 一起运行。 文档 安装依赖 $ npm install 构建一个小部件 $ grunt build 启动服务器并观察 css、html 和...
Node.js聊天应用 使用...建于Node.js,Express,jQuery,socket.io Mocha&Expect库进行测试时间戳消息的时刻用于HTML模板的Mustache.js未来的计划使聊天室不区分大小写使用户名唯一添加当前活动聊天室的列表以供选择