jquery.mustache.jsの使用例を紹介します

jquery.mustache は jQuery でカプセル化されており、テンプレートの使用をより便利にする次のメソッドを提供します。 1. テンプレートを追加する 3 つの方法

add、

addFromDom

addFromString

string テキストとして、または他の 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 ファイル) をロードし、

モジュール化 に依存せずに、組み込みの $.Mustache.load() メソッド

var viewData = { name: 'Jonny' }; $.Mustache.load('./templates/greetings.htm').done(function () { $('body').mustache('simple-hello', viewData); }); を直接使用して、 a をレンダリングします。では、外部テンプレート (html ファイル) をロードし、正常にロードされると、その内部の要素がレンダリングされます。 外部テンプレートは script タグ ブロックで定義する必要があります。この場合、simple-hello

//

./templates のソース コードを参照してください。詳細については、以下の /greetings.htm を参照してください

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

b、モジュール性に依存する場合、最初に require を使用してファイルをロードし、次にmustache を使用してファイルを読み取ります content (addFromString)

//1，准备工作 require('jQueryMustache'); var tpl = require("crownSheetTpl"); $.Mustache.addFromString(tpl); //2，使用 this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model); 2 、レンダリングの 2 つの方法 ( 1) グローバル $.Mustache.render() メソッド $.Mustache.render('my-template', viewData);

は文字列 (レンダリングされたテンプレートのコンテンツ) を返します

(2) jQuery 口ひげセレクター $("#someElement").mustache('my-template', viewData);

は、jQuery セレクターのリンクを返します。

このメソッドのデフォルトでは、レンダリングされたテンプレート コンテンツが DOM セレクター要素に追加されますが、オプションのメソッド パラメーターを渡すことでこの動作を変更することもできます。

// #someElement の内容をレンダリングされたテンプレートに置き換えます。

$('#someElement').mustache('my-template', viewData, { method: 'html' });

// を先頭に追加しますMustache テンプレートを #someElement.

$('#someElement').mustache('my-template', viewData, { method: 'prepend' }) にレンダリングしました。

mustache セレクターでは、モデル配列を渡すこともできます。口ひげセレクターを使用すると、ビュー モデルの配列をレンダリングに渡すこともできるため、リストの作成が簡単になります:)

// 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. 最後に、部分的なレンダリングがサポートされていますが、事前にロードされていることを確認してください

$.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}}