jquery.mustache は jQuery でカプセル化されており、テンプレートの使用をより便利にする次のメソッドを提供します。
1. テンプレートを追加する 3 つの方法
add、
addFromDom
addFromString
stringテキストとして、または他の DOM 要素を参照して、テンプレートを直接追加できます
(1)template は文字列です。
//add仅仅是把template添加到当前页面，注意并没有渲染
$.Mustache.add('string-template', '<p>Hi, {{name}}, this is an inline template<p>');// 两者是相同的，后者有更简洁的语法 These two are identical, the latter just provides a terser syntax.
$.Mustache.add('dom-template', $('#dom-template').html());
$.Mustache.addFromDom('dom-template');$.Mustache.addFromDom( ) を呼び出すことができます。パラメータを指定しないと、テンプレート内のすべての ブロックが読み取られます。
(3) 外部テンプレート (html ファイル) をロードし、
に依存せずに、組み込みの $.Mustache.load() メソッド
var viewData = { name: 'Jonny' };
$.Mustache.load('./templates/greetings.htm').done(function () {
$('body').mustache('simple-hello', viewData);
});外部テンプレートは script タグ ブロックで定義する必要があります。この場合、simple-hello
//
./templates のソース コードを参照してください。詳細については、以下の /greetings.htm を参照してください
<script id="simple-hello" type="text/html">
<p>Hello, {{name}}, how are you?</p>
</script>requireを使用してファイルをロードし、次にmustacheを使用してファイルを読み取りますcontent (addFromString)
//1，准备工作
require('jQueryMustache');
var tpl = require("crownSheetTpl");
$.Mustache.addFromString(tpl);
//2，使用
this.$el.empty().mustache('crownSheet-' + templateChoice + '-Template',this.model);
( 1) グローバル $.Mustache.render() メソッド
$.Mustache.render('my-template', viewData);
は文字列 (レンダリングされたテンプレートのコンテンツ) を返します
$("#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);为了便于调试，你可以使用$.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
<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>以上がjquery.mustache.jsの使用例を紹介しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
