介紹jquery.mustache.js的使用實例

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原始碼

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

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原始碼

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