HTMLテンプレートを拡張しますか？

Question

私の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テンプレートを拡張するために、ユーザーを有効にする方法はありますか？

Answer 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/

---

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

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

はその後$base前$subsでテンプレートを探すために、単純な機能を追加します。

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/