jquery.mustache is encapsulated with jQuery and provides the following methods to make template use more convenient.
1, three ways to add templates
add,
addFromDom
addFromString
You can add templates directly, whether as String Text or reference to other DOM elements
(1) template is a string literal
//add仅仅是把template添加到当前页面，注意并没有渲染
$.Mustache.add('string-template', '<p>Hi, {{name}}, this is an inline template<p>'); (2) Reference to DOM element addFromDom
// 两者是相同的，后者有更简洁的语法 These two are identical, the latter just provides a terser syntax.
$.Mustache.add('dom-template', $('#dom-template').html());
$.Mustache.addFromDom('dom-template');If you prefer to store the templates in the DOM (assuming they are loaded from an external file), then you can just call
$.Mustache.addFromDom() without any parameters, that way Will read all blocks in your template.
(3) Load the external template (html file), and then render
a, without relying on modularization, directly use the built-in $.Mustache. load() method
var viewData = { name: 'Jonny' };
$.Mustache.load('./templates/greetings.htm').done(function () {
$('body').mustache('simple-hello', viewData);
});In the above example, we loaded the external template (html file), and once the loading is successful, the elements inside it are rendered.
The external template should be defined in the script tag block. The id of the script tag will be used as the template name. In this example, it is simple-hello
// See below for details
./templates/greetings.htm source code
<script id="simple-hello" type="text/html">
<p>Hello, {{name}}, how are you?</p>
</script>b, when relying on modularization, first use require to load the file, and then use mustache Read file content (addFromString)
//1，准备工作
require('jQueryMustache');
var tpl = require("crownSheetTpl");
$.Mustache.addFromString(tpl);
//2，使用
this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model);2, two ways of rendering
(1) Global $.Mustache.render() method
$.Mustache.render('my-template', viewData);
Returns a string (rendered template content)
(2) jQuery’s mustache selector
$("#someElement").mustache('my-template', viewData);
Returns a jQuery selector link.
The default for this method is to append the rendered template content to the DOM selector element, but you can still change this behavior by passing an optional method parameter.
// 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' } );
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);3, other methods according to debugging needs, such as 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());$.Mustache.load('./templates/templates.htm').done(function () {
// 渲染`webcontent`模板 和 `footer-fragment`子模板.
$('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' });
});./templates/templates.htm below for details
<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>The above is the detailed content of Introducing the usage examples of jquery.mustache.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
