`
zccst
  • 浏览: 3315676 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery.mustache.js使用

阅读更多
作者: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>&copy; 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.pagination.js

    jQuery.pagination.js是一个专门用于分页的jQuery插件,它提供了易于使用的API和自定义选项,例如每页显示的条目数、样式设置、分页链接的行为等。这个插件可以帮助开发者快速实现无刷新分页功能,无需从头编写复杂...

    jquery-Mustache:用于jQuery的Moustache模板插件

    jQuery-Mustache-用于Mustache.js的jQuery插件是一个jQuery插件,它通过一点jQuery魔术使使用Mustache模板引擎的工作变得轻松。安装jQuery-Mustache有两个依赖项: 1.5或更高版本。 0.4或更高版本。 与所有jQuery...

    kettu, 用 jQuery Sammy和 mustache 重写传输网络客户端.zip

    kettu, 用 jQuery Sammy和 mustache 重写传输网络客户端 kettu使用 jquery 和 mustache.js Port http://github.com/kjg/derailleur 和原始传输网络客户机的端口。kettu osaa monta asiaa 。谢谢典雅设计的k

    jquery.jtemplates 实例

    在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。而jQuery.jTemplates则是jQuery的一个插件,专门用于处理复杂的模板渲染,使得动态数据的展示更加方便高效。本文...

    jquery-jsrender.js

    7. **独立性**:尽管 JSRender 常常与 jQuery 一起使用,但它本身并不依赖 jQuery,可以单独应用于任何 JavaScript 环境。 在提供的文件列表中,`jsrender.js` 应该是 JSRender 的核心库,而 `jquery-jsrender.js` ...

    jQuery百度搜索自动补全插件.zip

    jQuery百度搜索自动补全插件基于流行的JavaScript库jQuery和typeahead.js实现,为网页上的搜索框提供了高效且用户友好的自动补全功能。这个插件主要用于提升用户体验,尤其是在需要处理大量数据并希望用户能快速找到...

    jquery-tmpl

    jQuery tmpl虽然在功能上可能不如一些现代的模板引擎如Handlebars或Mustache强大,但它具有良好的兼容性和与jQuery的良好集成。对于那些已经习惯使用jQuery的开发者来说,jQuery tmpl是一个轻量级且易于上手的选择。...

    jsttojs:JSTtoJS-将JavaScript模板(例如mustache或jQuery.tmpl)预编译为单个文件的库

    一个node.js模块,用于将JavaScript模板(例如mustache或jQuery.tmpl)预编译为一个文件。 您可以预编译一些静态小胡子,hogan.js,jQuery.tmpl,underscore.js或任何其他模板,并将它们包含在生成的javascript...

    jquery.tmpl JQuery模板插件

    需要注意的是,JQuery.tmpl模板插件虽然方便易用,但它在最新版的jQuery中并不是默认包含的,因为jQuery核心团队推荐使用其他模板解决方案,如Mustache或者Handlebars。这并不影响JQuery.tmpl本身的使用,但如果需要...

    jquery.autocomplete

    如果你需要自定义结果项的展示,可以使用 `appendTo` 选项指定一个容器,并结合模板库(如 Handlebars 或 Mustache)来渲染结果: ```javascript $("#autocomplete-input").autocomplete({ source: availableTags,...

    用模版生成HTML的的框架jquery.tmpl使用详解

    使用jquery.tmpl时,数据的传递通常是通过JSON格式,因此在前端需要将JSON数据解析为JavaScript对象数组或对象。然后利用jquery.tmpl提供的方法,将数据绑定到模板上,并通过appendTo等方法将渲染好的HTML添加到页面...

    TypeScript类型定义DefinitelyTyped.zip

    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) ...

    一个jQuery插件用于数据绑定的HTMLRender模板引擎

    HTMLRender是一款基于jQuery的数据绑定模板引擎,主要用于帮助开发者在JavaScript中高效地进行DOM操作和数据渲染。这款插件是jQuery的一个扩展,它提供了一种简洁的语法来将数据与HTML结构进行绑定,使得动态生成和...

    JsRender.zip(jsrender.js和jsrender.min.js合集)

    5. **与jQuery集成**:虽然JsRender可以独立使用,但它与jQuery有很好的集成,可以方便地与jQuery插件和方法一起使用。 6. **递归模板**:JsRender 支持递归模板,这意味着可以在模板中嵌套使用同一个模板,这对于...

    livelist.js:使用 mustache 模板、underscore.js 和 jQuery 的无刷新 HTML 列表实现

    在页面上包含 mustache.js、underscore.js 和 livelist.js 在应用程序的 javascript/coffeescript 文件中,创建一个 livelist: javascript $(document).ready(function(){ list = new LiveList({ global: { ...

    jquery-chevron:一个包含 mustache js 模板功能的 jQuery 扩展,允许您将模板存储在单独的文件中,而不是将它们嵌入到 html 中

    jQuery Chevron 是一个 jQuery 扩展,它包装了 mustache js 模板功能,允许您将模板存储在单独的文件中,而不是将它们嵌入到 html 中。 用法 假设您有以下简单模板,名为“template.mustache”: Hello {{place}}...

    jquery 实现的分页功能

    可以使用模板引擎(如Mustache或Handlebars)或者直接用jQuery操作DOM来完成这一过程。 5. **分页逻辑**:分页组件通常包含“上一页”、“下一页”按钮,以及页码列表。需要计算总页数、当前页,并根据用户的操作...

    Android显示用jQuery+JS+HTML让是显示报表

    在Android应用中,可以使用JS和jQuery结合Chart.js来绘制报表中的图表。 8. **Android权限**: 当在`WebView`中加载网络资源时,可能需要添加INTERNET权限到AndroidManifest.xml文件中。 9. **优化性能**: 为了提高...

    bsmodalOpener:用于打开模态窗口的 AMD 模块。 依赖于 Bootstrap、jQuery 和 MustacheJS

    依赖于 Bootstrap、jQuery 和 MustacheJS 文档 modal-opener.js init(params) params = {title: string 可选(标题将显示在模态中), id_modal:需要的字符串(用于识别模态的 html id), 淡出效果:布尔值,可...

Global site tag (gtag.js) - Google Analytics