Introducing the usage examples of jquery.mustache.js

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', ' Hi, {{name}}, this is an inline template '); (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

Hello, {{name}}, how are you?

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); First clear the contents of someList, and then render it into the list template list-template with the array 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()); 4, finally, support partial rendering partials, just ensure Loaded in advance

$.Mustache.load('./templates/templates.htm').done(function () { // 渲染`webcontent`模板 和 `footer-fragment`子模板. $('body').mustache('webcontent', { year: 2012, adjective: 'EPIC' }); }); // See the source code of ./templates/templates.htm below for details

My {{adjective}} WebSite! {{! Insert the `footer-fragment` template below }} {{>footer-fragment}}