mustacheテンプレート技術の概要
一、概要Webテンプレートエンジンは、ユーザーインタフェースと業務データ(内容)を分離するために生成され、特定のフォーマットのドキュメントを生成することができ、通常は標準的なHTMLドキュメントである.もちろん、Javascriptの下のHogan、ASPの下のaspTemplate、PHPの下のSmartyなど、異なる開発言語には異なるテンプレートエンジンがあり、ここでは主にJavascript言語に基づくテンプレートエンジンを紹介し、現在はMustache、Hogan、doTが流行している.js、JsRender、Kendo UI Templates等、jsperf.comでは、パフォーマンスの比較が表示されます.
Mustacheは軽論理のテンプレート言語(Logic-less templates)であり、mustacheはjsテンプレートであり、Javascript、PHP、Python、Perlなど多くのプログラミング言語に応用できる利点がある.本来はjavascriptに基づくテンプレートエンジンであり、freemarkやvalicityに似ているが、freemarkやvalicityよりも軽量級で使いやすく、拡張を経て現在javascript、javaをサポートしている.NET、PHP、C++など多くのプラットフォームの下で開発! 

プロジェクトトップページ:http://mustache.github.com/

プロジェクトドキュメント:http://mustache.github.com/mustache.5.html

Demo:  http://mustache.github.com/#demo

二、テンプレート:1)jsテンプレートはhtmlファイルであってもよい

Hello {{name}}, it is {{timeNow}}.

2)jsテンプレートは、htmlコードのjs変数である値であってもよい

var template = "
Hello {{name}}, it is {{timeNow}}.
";

3)jsテンプレートはscriptクリップであってもよい
 

    <dl>
        <dt>Name</dt>
            <dd>{{name}}</dd>
        <dt>Time</dt>
            <dd>{{timeNow}}</dd>
    </dl>
    

 
mustacheテンプレート言語1)変数:変数タグは、現在のコンテキストの変数をテンプレートでレンダリングし、現在のコンテキストに変数が存在しない場合は空欄でレンダリングします.デフォルト変数は、元の値を表示する必要がある場合、3つのカッコまたはテンプレートタグの初期に&記号を追加するなど、HTML符号化処理されます.{{変数名},{{変数名}}}現在のキーが基本またはオブジェクトの場合は一度レンダリングし、配列の場合は配列長のレンダリング回数.ノードは#で始まり、/で終わります.テンプレート:{#stooges}{{name}{/stooges}}{json:{"stooges":[{"name":"王昇"},{"name":"梁文彦"},{"name":"石洋"};2).埋め込み配列ノードが番号で始まり、/で終わると配列長回数がレンダリングされる.テンプレート{{配列}{{配列内のkey}{/配列}}

var template = "{{#stooges}}{{name}}
{{/stooges}}";var view = {"stooges":[{"name":"  "},{"name":"   "},{"name":"  "}]}

3) .関数はテンプレートの変数として使用され、現在のリストの各要素のコンテキストで反復されます.
 

var template = "{{#beatles}}* {{name}}
{{/beatles}}";
var view = {
"beatles": [
    { "firstName": "John", "lastName": "Lennon" },
    { "firstName": "Paul", "lastName": "McCartney" },
    { "firstName": "George", "lastName": "Harrison" },
    { "firstName": "Ringo", "lastName": "Starr" }],
"name": function () {
    return this.firstName + " " + this.lastName;}
};

 
ノードキーの値が関数の場合、実行時の関数の2つのパラメータに注意します.1つ目はノード変数の直接値、2つ目は関数で、その実行コンテキストはビューオブジェクトに対応します.

var template = "{{#bold}}Hi {{name}} {{lastName}}.{{/bold}}";
var view = {"name": "John","lastName": "Lennon","bold": function () {
　　　　return function (text, render) {return "" + render(text) + "";}
}}

4)mustacheテンプレートはテンプレート変数を用いてテンプレート変数を上下に探して必要なデータを埋め込む.jsonデータのkeyはテンプレートの変数に対応して埋め込まれます.テンプレート変数とjsonのkeyは対応しないと埋め込まれません.表示コードが埋め込まれていない変数を生成する表示用Mustacheを使用しない.render(template,view)メソッドデータを埋め込んで展示コードを生成する

view-jsonデータであり、テンプレートコンテキストとして

template-テンプレートオブジェクト

//  
var template = "
Hello {{name}}, it is {{{ignore name}}}.it is {{&name}}
";
//  
var date = new Date();
var view = {name: "Jonny",timeNow: date.getHours() + ':' + date.getMinutes() };

テンプレートファイルを使用して、この方法でデータを埋め込んで表示コードを生成するには

$.get('    ', function(templates) {
    var template = $(templates).html();
    $Mustache.render(template, view);
});

三、Mustache文法
Mustacheのテンプレート構文は簡単で、HTML、プロファイル、ソースコードなどに使用されます.テンプレートラベルは、ハッシュ値またはオブジェクトで拡張されます.

{{keyName}}

{{#keyName}} {{/keyName}}

{{^keyName}} {{/keyName}}

{{.}}

{{

{{{keyName}}}

{{!comments}}

 

...


var data = {
    "company": "Apple",
    "address": {
        "street": "1 Infinite Loop Cupertino</br>",
        "city": "California ",
        "state": "CA ",
        "zip": "95014 "
    },
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
}
var tpl = '<h1>Hello {{company}}</h1>';
var html = Mustache.render(tpl, data);
console.log( html )

...

//    Console   ：
Hello Apple

 
1.{{keyName}}{{}}はMustacheのマーカーであり、カッコ内のkeyNameはキー名を表し、この文の役割はキー名に一致するキー値を直接出力することであり、例えば:

var tpl = '{{company}}';
var html = Mustache.render(tpl, data);
//  ：
Apple

2.{#keyName}{/keyName}}は#で始まり、/でブロックを表します.現在のコンテキストのキー値に基づいて、Demoのtplを書き換えるなど、ブロックを1回または複数回レンダリングします.

var tpl = '{{#address}} 
{{street}},{{city}},{{state}}
 {{/address}}';
var html = Mustache.render(tpl, data);

//  ：
1 Infinite Loop Cupertino</br>,California,CA

注意:{{#keyName}} {{/keyName}}のkeyName値がnull、undefined、falseの場合.レンダリング出力は行われません.
3.{^keyName}{/keyName}}この構文は{{#keyName}} {{/keyName}}と同様で、keyName値がnull,undefined,falseの場合にブロックの内容がレンダリングされて出力されるのとは異なります.

var tpl = {{^nothing}}    nothing         {{/nothing}};
var html = Mustache.render(tpl, data);

//  ：
    nothing         

4. {{.}} {{.}}は列挙を表し、例えば配列全体を循環出力することができる.

var tpl = '{{#product}} 
{{.}}
 {{/product}}';
var html = Mustache.render(tpl, data);

//  ：
Macbook iPhone iPod iPad

5.{{>partials}}は、{{>address}}のようなサブモジュールを>で表し始める.構造が複雑な場合、この構文を使用して複雑な構造をいくつかの小さなサブモジュールに分割できます.たとえば、次のようにします.
 

var tpl = "
{{company}}
 

{{>address}}"
var partials = {address: "{{#address}}

{{street}}

{{city}}

{{state}}

{{zip}}

{{/address}}"}
var html = Mustache.render(tpl, data, partials);
//出力:
Apple

1 Infinite Loop Cupertino

California

CA

95014

 
6.{{{keyName}}{{keyName}}出力は等特殊文字を翻訳し、コンテンツをそのまま出力するには{{{}}}、例えば:

var tpl = '{{#address}} 
{{{street}}}
 {{/address}}'

//  ：
1 Infinite Loop Cupertino

7.{!comments}}!はコメントを表し、コメント後はレンダリング出力されません.

{{!     }}
//  ：

四、Mustache.JAvaとMustachejs開発
1.java開発参照https://github.com/spullara/mustache.java
2.js開発参照https://github.com/janl/mustache.js
参照先:

http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

http://mustache.github.com/mustache.5.html

http://ued.xinyou.com/2012/07/mustache_5_document.html