1

私はHandlebars.jsを使用していますが、現在、すべてのテンプレートはスクリプトタグ内にあり、スクリプトタグ内には、他の多数のテンプレートを含む.htmlファイル内にあります。スクリプトタグ内にもあります。

<script type="text/template" id="template-1">
  <div>{{variable}}</div>
</script>

<script type="text/template" id="template-2">
  <div>{{variable}}</div>
</script>

<script type="text/template" id="template-3">
  <div>{{variable}}</div>
</script>

...

次に、このファイルを部分的にサーバー側に含めます。

これには、次の欠点があります。

  1. たくさんのテンプレートがHTMLファイルに詰め込まれています。
  2. 特定のテンプレートを見つけるのは面倒です。

テンプレートを整理するためのより良い方法を探しています。各テンプレートを独自のファイルに保存してほしい。例えば：

/public/views/my_controller/my_action/some_template.html
/public/views/my_controller/my_action/some_other_template.html
/public/views/my_controller/my_other_action/another_template.html
/public/views/my_controller/my_other_action/yet_another_template.html
/public/views/shared/my_shared_template.html

次に、ビューの上部にあるバックエンドコードで、ページの読み込み時に次のようにこれらのテンプレートを含めることができます。

SomeTemplateLibrary.require(
    "/public/views/my_controller/my_action/*",
    "/public/views/shared/my_shared_template.html"
)

これには、/ public / views / my_controller / my_action /内のすべてのテンプレートが含まれ、/ public / views / shared/my_shared_template.htmlも含まれます。

私の質問：この機能または同様の機能を提供するライブラリはありますか？または、誰かが代替の組織的な提案を持っていますか？

4

4 に答える 4

4

RequireJSは、AMDスタイルの依存関係管理に最適なライブラリです。実際には、requireJSの「text」プラグインを使用して、テンプレートファイルをUIコンポーネントにロードできます。テンプレートがDOMにアタッチされると、バインディングに任意のMVVM、MVCライブラリを使用するか、ロジックにjQueryイベントを使用することができます。

私はBoilerplateJSの作者です。BoilerplateJSリファレンスアーキテクチャは、依存関係の管理にrequireJSを使用します。また、自己完結型のUIコンポーネントを作成する方法を示すリファレンス実装も提供します。独自のビューテンプレート、コードビハインド、css、ローカリゼーションファイルなどを処理するという意味での自己完結型。

BoilerplateJSUIコンポーネントのファイル

ボイラープレートJSのホームページの「UIコンポーネント」の下に、さらにいくつかの情報があります。

http://boilerplatejs.org/

于 2012-08-17T09:56:58.897 に答える
2

最終的にRequireJSを使用しましたが、これでほとんどこれが可能になりました。http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/を参照してください。

于 2012-06-07T16:51:47.460 に答える
2

テンプレートローダーを使用して、最初に必要になったときにajaxを使用してテンプレートをロードし、将来のリクエストのためにローカルにキャッシュします。また、デバッグ変数を使用して、開発中にテンプレートがキャッシュされないようにします。

var template_loader = {
    templates_cache : {},
    load_template : function load_template (params, callback) {
        var template;
        if (this.templates_cache[params.url]){
            callback(this.templates_cache[params.url]);
        }
        else{
            if (debug){
                params.url = params.url + '?t=' + new Date().getTime(), //add timestamp for dev (avoid caching)
                console.log('avoid caching url in template loader...');
            }
            $.ajax({
                url: params.url,
                success: function(data) {
                    template  = Handlebars.compile(data);
                    if (params.cache){
                        this.templates_cache[params.url] =  template;
                    }
                    callback(template);
                }
            });
        }
    }
};

テンプレートは次のようにロードされます。

template_loader.load_template({url: '/templates/mytemplate.handlebars'}, function (template){
  var template_data = {}; //get your data
  $('#holder').html(template(template_data)); //render
})
于 2012-07-17T22:51:01.070 に答える
0

まさにこの目的のために私が書いたこの便利な小さなjqueryプラグインがあります。

https://github.com/cultofmetatron/handlebar-helper

于 2013-03-27T07:31:02.533 に答える