0

0

介绍jquery.mustache.js的使用实例

零下一度

零下一度

发布时间:2017-06-17 17:53:35

|

3121人浏览过

|

来源于php中文网

原创

jquery.mustache是用jquery做了一层封装,提供了以下几个方法,让模板使用更便捷。
1,添加模板的三种方式

add,

addFromDom

addFromString

可以直接添加模板,无论是作为字符串文字或引用其他的DOM元素

(1)template 是字符串直接量

//add仅仅是把template添加到当前页面,注意并没有渲染
$.Mustache.add('string-template', '

Hi, {{name}}, this is an inline template

');

(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(),不用任何参数,这样的话将读取你模板中所有块。

(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源码

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

返回一个字符串(渲染后的模板内容)

睿拓智能网站系统-网上商城
睿拓智能网站系统-网上商城

睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境:asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统,拥有产品发布,新闻发布,在线下单等全部功能,并且正式商用用户可在线提供多个模板更换,可实现一般网店交易所有功能,是中小企业和个人开展个人独立电子商务商城最佳的选择,以下为详细功能介绍:1.最新产品-提供最新产品发布管理修改,和最新产品订单查看2.推荐产

下载

(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源码


热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

21

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

7

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

10

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

漫画防走失登陆入口大全
漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

7

2026.01.31

php多线程怎么实现
php多线程怎么实现

PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

php如何运行环境
php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php环境变量如何设置
php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php图片如何上传
php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号