jsRenderテンプレートを別のjsファイルに保存

Question

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

私はそれを別のファイルに保存して、私のページにそれを参照したいと思います。この

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

よう

何かが、私は任意のcommemntsや提案をapreciateます。

ありがとうございます。

Answer 1

はい、これを達成できます（これは毎回使用します）。

あなたはのように、それを引くと、テンプレートにロードするjQueryの$.get()を使用してページ内例えば_productDetails.tmpl.html

、あなたはtemplateフォルダにテンプレートを持っており、それが呼び出されると仮定してみましょう：

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);

Answer 2

を呼び出すことができます。 jsRenderコードを調べて他のjavascriptライブラリを調べた後、外部テンプレートの読み込みを簡単にするライブラリを作成して、<link>タグを使用してHTMLページにテンプレートを添付し、.jsファイル。あなたはそれをチェックアウトしたい場合、私は例を挙げてgithubの上のコードを掲載している：

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

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

お楽しみください！

Answer 3

ローカルファイルから外部テンプレートをロードしようとしている場合は、私のように、あなたにいくつかの欲求不満を救いましょう。 で推奨されるjQuery $.get()を使用しないでください。balexandreの答えです。

$.ajax()を使用し、async: trueとdataType: textと設定します。それ以外の場合は、エラー番号elem.getAttribute is not a functionが返されます。 詳細はError when loading jsrender templates through AJAXへの私の答えを参照してください。

Answer 4

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

<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テンプレート

Answer 5

をレンダリングするAJAXファイル毎回要求する必要はありません、私は一度に1つまたは複数の外部のテンプレートを読み込むために書いた関数です。テンプレートもキャッシュされています。すでにロードされている場合は、再びロードされません。

function loadTemplates() { 
    var toLoad = [], 
     loadAll = $.Deferred(); 

    $.each(arguments, function(i, templateName) { 
     var filepath = '/path/to/templates/' + templateName + '.html', 
      loadTemplate = $.Deferred(); 

     toLoad.push(loadTemplate); 

     if ($.templates[templateName]) { 
      loadTemplate.resolve(); 
     } else { 
      $.get(filepath , function(html) { 
       var newTemplate = {}; 
       newTemplate[templateName] = html; 
       $.templates(newTemplate); 
      }).fail(function() { 
       throw 'Could not load template at '+filepath; 
      }).done(function() { 
       loadTemplate.resolve(); 
      }); 
     } 
    }) 

    $.when.apply($, toLoad).done(function() { 
     loadAll.resolve(); 
    }); 

    return loadAll; 
} 

ので、同じようにそれを使用してください：それは私がテンプレートをレンダリングするたびにHTTPリクエストを送信することをお勧め

loadTemplates('modal','itemDetail', 'itemsList').done(function() { 
    // do stuff when all templates are loaded 
    $('#viewItemDetail').on('click',function() { 
     $.render.itemDetail({ 
      id:'123', 
      name:'Cool Thing', 
      description:'This thing is really cool.' 
     }); 
    }); 
});