18

jsRenderテンプレートを別のファイルに保存することは可能ですか？

別のファイルに保存して、自分のページで参照したいと思います。

このようなもの

<script id="templateName" type="text/x-jsrender" src="thisIsTheTemplate.js"></script>

私はどんな記念や提案にも感謝します。

ありがとう

4

5 に答える 5

21

はい、これを達成できます (私は毎回これを使用します)。

templateたとえば、フォルダーにテンプレートがあり、それが呼び出されたとします。_productDetails.tmpl.html

あなたのページでは、次のように jQuery$.get()を使用してプルし、テンプレートにロードします。

var renderExternalTmpl = function(item) {

    var file = '../templates/_' + item.name + '.tmpl.html';
    $.when($.get(file))
     .done(function(tmplData) {
         $.templates({ tmpl: tmplData });
         $(item.selector).html($.render.tmpl(item.data));
     });    
}

オブジェクトitemウィッチを渡すと、次のような 3 つのプロパティがすべて含まれます。

renderExternalTmpl({ name: 'productDetails', selector: '#items', data: {} })

これらすべてを保持するための素敵なユーティリティクラスを作成できます。

var my = my || {};
my.utils = (function() {
    var getPath = function(name) {
        return '../templates/_' + name + '.tmpl.html';
    },
    renderExtTemplate = function(item) {

        var file = getPath( item.name );
        $.when($.get(file))
         .done(function(tmplData) {
             $.templates({ tmpl: tmplData });
             $(item.selector).html($.render.tmpl(item.data));
         });    
    };

    return {
        getPath: getPath,
        renderExtTemplate: renderExtTemplate
    };
});

そして、あなたは簡単に呼び出すことができますmy.utils.renderExtTemplate(item);

于 2012-05-14T08:26:08.883 に答える
2

私は最近、この問題に遭遇しました。jsRender コードに目を通し、他の JavaScript ライブラリを調べた後、<link>タグを使用して HTML ページにテンプレートを添付し、.js ファイルを含めるだけでそれらをレンダリングできるように、外部テンプレートのロードを簡素化する独自のライブラリを作成することにしました。確認したい場合は、例とともにコードを github に投稿しました。

https://github.com/stevenmhunt/tmpl.loader

このライブラリは、jsRender だけでなく、テンプレートを処理できるすべてのコードで動作します。

楽しみ！

于 2012-09-12T15:29:55.710 に答える
1

私のように、ローカル ファイルから外部テンプレートを読み込もうとしている場合に備えて、フラストレーションを解消しましょう。balexandre$.get()の回答で推奨されているように jQuery を使用しないでください。

を使用$.ajax()し、 および を設定async: trueしdataType: textます。そうしないと、エラーが発生します: elem.getAttribute is not a function。詳細については、 AJAX を介して jsrender テンプレートをロードするときのエラーに対する私の回答を参照してください。

于 2012-11-29T23:04:24.877 に答える
0

私の経験では、そのような問題に対処する必要はありません。使用する前にテンプレートをページに追加するだけで済みます。以下のコードを参照してください。

<div id="all_template"></div>
<script>
var file = '/tmpl/all.tmpl.html';
$.ajax({
    url: file,
    async: false,
    type : "GET",
    dataType: 'text',
    cache: true,
    success: function(contents) 
    {
    $("#all_template").append(contents);//append all your template to the div
    }
});
</script>
<script>
var data = {};
$('#js-template').render(data);//use it as the same old way
</script>

このように、js テンプレートをレンダリングするたびに ajax ファイルを要求する必要はありません。

于 2016-11-16T02:43:29.403 に答える