2

私は、自分の部門の他のグループがWebアプリのUIを標準化するために使用するWebアプリケーションフレームワークを作成しています。これは、underscore.jsを介したHTMLテンプレートを使用してJavaScriptで記述されています。ただし、アプリを完全に拡張できるようにするには、ソースを変更せずに、適切と思われるHTMLテンプレートを拡張できるようにしたいと思います。

ソース

templates.html

...
<script type="text/template" id="fooTemplate">
  <div class="foo">
  </div>
</script>
<script type="text/template" id="barTemplate">
  <p>Bar!</p>
</script>
...

実装

newTemplates.html

...
<!-- Only overwrite foo, not bar !-->
<script type="text/template" id="fooTemplate">
  <ul class="foo">
    <li class="bar">Blah!</li>
  </ul>
</script>
...

ユーザーがファイルを上書きしたり、変更していないテンプレートをコピーして貼り付けたりすることなく、HTMLテンプレートを直感的に拡張できるようにする方法はありますか？

4

1 に答える 1

1

id一意性の問題を処理するための一連のサーバー側処理がなければ、属性を使用してテンプレートを識別することはできません。ただし、クラスを使用してテンプレートを識別することができます。

すべてのテンプレートHTMLファイルをオーバーライド順にマッシュアップし（最初に「ベース」テンプレート、その後に「サブテンプレート」）、class属性を使用してテンプレートを識別します。

<!-- templates.html -->
<script type="text/template" id="fooTemplate">
  <div class="foo">
  </div>
</script>
<script type="text/template" id="barTemplate">
  <p>Bar!</p>
</script>
<!-- newTemplates.html -->
<script type="text/template" id="fooTemplate">
  <ul class="foo">
    <li class="bar">Blah!</li>
  </ul>
</script>

次に、次のようなものを使用できます

var foo = _.template($('.fooTemplate:last').html());
var bar = _.template($('.barTemplate:last').html());

テンプレートにアクセスします。

デモ： http： //jsfiddle.net/ambiguous/gYHkF/

また、idsを使用して、最初からテンプレートをロードし、見つからない場合はnewTemplates.htmlフォールバックしてみることもできます。templates.htmlテンプレートファイルを2つの別々の変数にロードするが、それらをDOMに挿入しない場合：

var $base = $('stuff from templates.html');
var $subs = $('stuff from newTemplates.html');

$subs次に、前にテンプレートを探すための簡単な関数を追加します$base。

function tmpl(id) {
    var $t = $subs.filter('#' + id);
    if($t.length)
        return _.template($t.html());
    return _.template($base.filter('#' + id).html());
}

次に、これを行うことができます：

var foo = tmpl('fooTemplate');
var bar = tmpl('barTemplate');

そして正しいことが起こります。

デモ： http： //jsfiddle.net/ambiguous/EhhsL/

このアプローチにより、コンパイルされたテンプレートを簡単にキャッシュでき、二重ルックアップを回避できるだけでなく、同じものを何度もコンパイルすることも回避できます。

function tmpl(id) {
    if(tmpl.cache.hasOwnProperty(id))
        return tmpl.cache[id];
    var $t = $subs.filter('#' + id);
    if($t.length)
        return tmpl.cache[id] = _.template($t.html());
    return tmpl.cache[id] = _.template($base.filter('#' + id).html());
}
tmpl.cache = { };

デモ： http： //jsfiddle.net/ambiguous/YpcJu/

于 2012-04-25T18:03:44.387 に答える