JavaScriptテンプレート
JavaScript で実装されたクライアント側データバインディングメソッド

JavaScriptテンプレートとは、 JavaScript言語で実装されたクライアントサイドの データバインディング手法を指します。このアプローチは、JavaScriptの利用増加、クライアント処理能力の向上、そしてクライアントのWebブラウザへの計算アウトソーシングの傾向により普及しました。人気のJavaScriptテンプレートライブラリには、AngularJS、Backbone.js、Ember.js、Handlebars.js、JSX （ Reactで使用）、Vue.js、Mustache.jsなどがあります。データファイル（多くの場合、 JSONオブジェクト）から特定のキーの値を呼び出すには、二重中括弧（{{key}}）を使用するのが一般的です。

例

presidents.jsonすべての例では、次の内容の 外部ファイルを使用します。

{ 
"大統領" : [ { "名前" : "ワシントン" 、"名" : "ジョージ" 、"生年" : "1732" 、"死亡" : "1799" }, { "名前" : "リンカーン" 、"名" : "エイブラハム" 、"生年" : "1809" 、"死亡" : "1865" } ] }

すべての例では次の HTMLリストが生成されます。

  • ワシントン（1732–1799）
  • リンカーン（1809–1865）
図書館 HTMLコード 説明

DNAテンプレート 

< link  rel = "スタイルシート"  type = "text/css"  href = ".../template.css" />
<スクリプト src = ".../jquery.min.js" ></スクリプト>
<スクリプト src = ".../jquery.template.min.js" ></スクリプト> ➊

私たちの好きな大統領は次のとおりです:
< ul  id = "ターゲット" >
    < li  template = "[大統領]"  z-var = "名前 ., 生年 ., 死亡 ." >
     ${name} (${born}-${death})
    </li>​​
</ ul > ➋

<スクリプト>
    $ .getJSON ( ' .../presidents.json' ,関数(データ) {  
        $ ( '#target' ). template (データ);
    });
</スクリプト> ➌

➊ 必要なjQueryを含む必要なリソースをロードします。➋属性マーキング for-each サブテンプレートと置換手順
を含む HTML コード。➌ id 属性が " " の HTML テンプレート から JSON データをロードし、データを適用します。 templatez-var
presidents.jsontarget

口ひげ.js 

<スクリプト src = ".../jquery.min.js" ></スクリプト>
<スクリプト src = ".../mustache.min.js" ></スクリプト> ➊

私たちの好きな大統領は次のとおりです:
< ul  id = "ターゲット" ></ ul > ➋

<スクリプト ID = "大統領テンプレート" タイプ= "テキスト/テン​​プレート" >
    {{ #大統領}}
        < li > {{名前}} ({{生年}} - {{死亡}}) < /li> 
    {{ /大統領}}
</スクリプト> ➌

<スクリプト>
    $ .getJSON ( ' .../presidents.json' ,関数(データ) {  
        varテンプレート= $ ( '#president-template' ) .html ( );   
        var info = Mustache.to_html (テンプレート、データ) ;​    
        $ ( '#target' ). html (情報);
    });
</スクリプト> ➍

➊ 必要なライブラリ (ここではmustache.jsとjQuery)
をロードします 。➋ HTML コードは、生成されたコンテンツを挿入するための「ターゲット」を提供します。➌
「president-template」という名前のテンプレートを提供します。➍
最後に、JSON データを把握し、各大統領のサブ項目に対して 1 つのテンプレートを把握して入力し、最終的に HTML ページのターゲットを選択して全体を追加する関数です。

テンプレートは、配布される情報が変更される場合があり、利用可能な人的リソースでさまざまな HTML ページで維持するには大きすぎ、サーバー側のより重いテンプレートを必要とするほど大きくない場合に役立ちます。

参照

参考文献

  • JavaScript テンプレート、Mozilla Developer Network、2013
  • Basavaraj, veena (2012)、「クライアントサイドテンプレートのスローダウン：mustache、handlebars、dust.js など」、Linkedin.com
  • Villalobos, Ray (2012)、Mustache.js による JavaScript テンプレート入門 (ビデオチュートリアル)、ViewSource.com、2013 年 5 月 13 日のオリジナルからアーカイブ
  • バージェス、アンドリュー（2012）、JavaScriptテンプレートを使用する際のベストプラクティス、Net.tutsplus.com
  • Landau, Brian (2009)「Javascriptテンプレートライブラリのベンチマーク」
  • http://www.jquery4u.com/javascript/10-javascript-jquery-templates-engines/
  • 他のフレームワークとの比較、Vue.js 、 2018年12月11日取得
「https://en.wikipedia.org/w/index.php?title=JavaScript_templating&oldid=1320215915」より取得