1

複数のテンプレートを 1 つの外部テンプレート ファイルに保持したいと考えています。しかし、ファイル全体から 1 つのテンプレートを取得する方法がわかりません

4

2 に答える 2

3

テンプレート コレクションには、異なるスクリプト タグが必要です (jsRender の既定のインライン使用法として)。次に、コレクションファイルをロードし、要求された部分を見つけてレンダリングできます。これと同じように動作するはずです:(テストされていません。理論的なものです)

my.renderUtils = (function () {
  // your template file (contains a set of script tags with ids)
  var templateFile = "template/file.html";
    renderTemplate = function (templateSelector, targetSelector, data) {
      $.get(templateFile, null, function (templateCollection) {
        var template = $(templateCollection).find( templateSelector ), /* find the correct part from the collection */
            tmpl = $.templates(template), /* rendering process */
            htmlString = tmpl.render(data);
        if (targetSelector) {
          $(targetSelector).html(htmlString); /* add it to your target */
        }
        return htmlString;
      });
    };
    return {
      renderExternalTemplate: renderTemplate
    };
})()

// usage 
my.renderUtils.renderExternalTemplate("yourTemplateFilePartID", "#yourTargetSelector", {yourdata:''}});
于 2013-01-26T11:02:17.200 に答える
2

2つの選択肢があります。これが私の古い作業方法です（それ以来私は離れました）。それは本質的にミシェルが上で述べたことです：

$.when( $.get('<%= asset_path('t1.html') %>', null, null, 'html') ).done(function (data, status, jqXHR) {
    // data is a string.  $(data) turns into an array of HTML
    // elements.  Often it is just one but if we get them ganged
    // into one file, they will be more than one.
    $(data).each(function () {
        // We assume the outside element is just a container.  I
        // use a <script> tag but it can be anything I suppose.
        // The id of the container becomes the template's name
        // while the contents becomes the template.
        $.templates(this.id, $(this).html());
        return this;
    });
    $('.upd_apar_defs tbody').html($.render.template1({items: json_elements.items, offset: 0}));
}).fail(function (a, b, c) {
    alert('Someone is really unhappy');
});

取得する最初の引数はURLです。これは、SASSを使用したRailsプロジェクトからのものです。Asset_pathは、t1.htmlパスへの相対パスに変換されます（いずれもあなたの質問には関係ありません。上記のコードが何をしているのかを説明しているだけです）。

私はこれから離れて、テンプレートを別々のファイルに分割しましたが、Railsのアセットパイプラインを介してそれらをまとめて戻しました。それらが一緒に結合されると、テンプレートの名前としてファイルの名前を使用し、テンプレート自体としてファイルの内容を使用して、$。templateへの呼び出しでラップされます。大まかに私はこれに従いました：

https://github.com/erubboli/sprockets-jsrender

私はそれをやり直しましたが、本質的に彼の概念のほとんどを使用しました。結果は、ロードするだけのjavascriptファイルであり、ロードすると、テンプレートが実行および定義されます。

私の論理はこれでした：

同じファイルに複数のテンプレートを配置する場合は、それぞれの周りに小さなラッパーを配置し、ほとんどがhtmlおよびjs-renderのように見える場合でも、ファイルを純粋なjavascriptファイルにします。これは難しいことではありません。エディターはそれを非常に簡単に処理でき、あなたが何をしているかは比較的明確です。

次に、ヘッド内のタグを介してファイルをロードする、クライアント側でキャッシュする、圧縮するなど、純粋なjavascriptファイルを持つことのすべての利点を活用できます。テンプレートはページのロード時にロックンロールする準備ができています余分なフェッチを保存します。

HTH

于 2013-01-26T17:53:26.760 に答える