2

私の質問は、JSテンプレートエンジンがどのように機能するかについてです。

たとえば、次のようなテンプレートがあります。

<div class="my-block"> 
   <h1>{{title}}</h1>
   <p>{{description}}</p>
</div>

...そしてデータ付き：

{
   title: 'Hello',
   description: 'World'
}

...それはいくつかの変数に保存されるDOM要素にレンダリングされます（単に（このようなものを置き換え{{title}}て）：{{description}}String replace()

<div class="my-block"> 
   <h1>Hello</h1>
   <p>World</p>
</div>

このようなタイプの要素は一度に1つしか存在しませんが、その中の値（タイトルと説明）はかなり頻繁に変更されます。

毎回DOM要素を作成することを回避し（ ）、既存の要素を自動的に.my-block置き換える{{title}}にはどうすればよいですか？{{description}}

4

3 に答える 3

1

コードにマークアップを追加する

<div class="my-block"> 
   <h1 class="slot-a">Hello</h1>
   <p class="slot-b">World</p>
</div>

次に、それを更新します（簡単にするためにjQueryを使用し、好きなものを使用します）

$('.my-block .slot-a').text(data.title);
$('.my-block .slot-b').text(data.description);
于 2013-03-11T17:53:19.030 に答える
1

これにはすでに受け入れられている答えがありますが、それはjQueryを使用して動的データを挿入するコードを書くことを示唆しています。私はjQueryが大好きで、コードを書くことは問題ないこともありますが、これはテンプレートの使用に関する良い質問です。それを念頭に置いて、私はあなたの質問に答え、Transparency.jsとMustache.jsを使用してオプションを示します。

DOMで要素を維持することと、テンプレートエンジンを適用することに関しては、2つの選択肢があります。そこから開始して（HTMLとともに送信）、DOMベースのテンプレートエンジンを使用するか、scriptタグにマークアップを含めて、文字列ベースのテンプレートエンジンを使用して動的に追加することができます。

最初のオプションに関しては、TransparencyやPUREなどのDOMベースのエンジンを使用してテンプレートを適用できます。透明性は、実際にはHTMLがすでにDOMにあることを想定しており、そのコンテンツをインプレースで操作します。単純なテンプレートの場合、これはうまく機能します。マークアップの要素にクラス、ID、またはその他の識別属性を追加する必要があるかどうかはあなた次第ですが、これは欠点です。これがデモンストレーションの例です：

HTML（テンプレートとして機能し、 DOMに存在します）：

<div class="my-block" id="myTemplate"> 
    <h1 class="title"></h1>
    <p class="description"></p>
</div>

JavaScript（jQueryまたはjQueryのようなライブラリが含まれていることを期待）：

$(function() {
    var data = {
        title: 'Hello',
        description: 'World'
    };

    $('#myTemplate').render(data);
});

これがjsFiddleです：Transparency.jsの例

DOM要素にIDを追加して、DOMアクセスが少し速くなるようにすることをお勧めします。しかし、それは完全にあなた次第です。

HTMLをDOMに動的に追加することもできます。その場合は、別の方法でテンプレートを含める必要があります。簡単な方法の1つは、。付きのscriptタグを使用することtype="text/template"です。ブラウザはこのテキストをDOMに配置しませんが、テンプレート用にコンテンツを抽出するためにjQueryなどのライブラリを使用してアクセスできます。Mustache.jsを使用して、そのアプローチを示す例を次に示します。

scriptHTML（タグ内のテンプレートを含む）：

<div class="my-block" id="myBlock"></div>

<script type="text/template" id="myTemplate">
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
</script>

JavaScript：

$(function() {
    var data = {
        title: 'Hello',
        description: 'World'
    };

    var template = $('#myTemplate').html();

    var html = Mustache.render(template, data);

    $('#myBlock').html(html);
});

これがjsFiddleです：Mustache.jsの例

2番目の例では、テンプレート化された文字列を出力するためにDOMにプレースホルダーdivが必要ですが、動的に追加されるため、h1または要素を含める必要はありません。p

それぞれのアプローチには明らかな利点がいくつかあります。私は個人的にTransparency.jsとその兄弟が好きですが、それはより単純なロジックのないテンプレートでのみ機能します。また、要素に属性を追加する場合も注意が必要です。CSSで同じ属性を再利用できますが、物事を少し結合し始め、それは危険です。

Mustache.jsもロジックレスですが、結果のマークアップに属性を追加する必要はありません。必要なのは、中かっこ2つでMustache構文を使用することだけです。ただし、テンプレートをタグに含める必要がありますscript。または、Hogan.jsなどを使用してMustacheをプリコンパイルすることもできます。

最近公開したGithubPagesサイトで、Jadeと一緒に他のいくつかの例を示しました。テンプレートをページ上で直接表示し、ソースを表示して、JavaScriptでテンプレートがどのようにレンダリングされたかを確認できます。

リンク：テンプレートサンドボックス

Transparency.jsの詳細：Transparencyをお試しください

..およびMustache.js：Github上のMustache.js

于 2013-03-13T00:20:23.097 に答える
0

各要素を呼び出し.textて、モデル値を設定します。

于 2013-03-11T17:22:08.100 に答える