JavaScript でテンプレート プラグインを使用するにはどうすればよいですか?

この章では、JavaScript でテンプレート プラグインを使用する方法を紹介し、テンプレート プラグインの使用方法を理解します。困っている友人は参考にしていただければ幸いです。

プラグインの紹介: template は、高性能 JavaScript テンプレート エンジンです。

プラグインの機能:

1. 優れたパフォーマンスと高速な実行速度 (mustache や tmpl の 20 倍以上)

2. 例外テンプレートが配置されているステートメントを正確に特定できるランタイム デバッグをサポートします。

3. NodeJS Express をサポート 非常に優れたサポートです。

4. 出力はデフォルトでエスケープされます。テンプレートは非常に合理化された js ファイルに変換できます

7. テンプレート ステートメントの概要、データを参照するためのプレフィックスは不要です。簡潔なネイティブ バージョンを選択できます

8. すべての一般的なブラウザをサポートします。始めましょう (構文は 2 つあります。この記事では入門構文について説明します)

1) artTemplate テンプレートは、type="text/html" の script タグを使用してテンプレートを保存する必要があります (タグは HTML)。

<script type="text/html"></script>

2) 独自のテンプレートの作成を開始します

<script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

3) データを使用してテンプレートをレンダリングします

var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 }; var html = template('model',data); document.getElementById('box').innerHTML = html

artTemplate 簡潔な構文の紹介:

1) 使用する前に、簡潔な構文バージョンを引用する必要があります。次に例を示します。

<script src="template.js"></script>

2) 式: {{ と} } 記号で囲まれたステートメントはテンプレート式です。

3) 出力式:

コンテンツエンコーディングありの出力: {{ title }}

エンコーディングなしの出力: {{ #title }}

// 假如有这样一段数据，title 内出现了标签  var data ={
      title: &#39;<i>热爱的</i>游戏&#39;,
      list: [&#39;LOL&#39;,&#39;王者农药&#39;,&#39;梦三国&#39;,&#39;魔兽争霸&#39;,&#39;其它&#39;]
 }; {{ title }}  // 显示内容为：<i>热爱的</i>游戏 {{ #title }} // 显示内容为：热爱的游戏

4) 条件式

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>　　　　　// 判断条件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

5) トラバーサル式

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}// 也可以被简写为
{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

artTemplateメソッド:

template 関数には2つのパラメータ値があります。

最初のパラメータは、コンパイルする必要があるテンプレートを表します (テンプレートの ID を入力します) 2 番目のパラメーターはテンプレートに入力する必要があるデータで、戻り値はコンパイルされた HTML 文字列です

コード例:

rrree

以上がJavaScript でテンプレート プラグインを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。