將jsRender模板存儲在單獨的js文件中

Question

是否可以將jsRender模板存儲在單獨的文件中？

我想將它存儲在一個單獨的文件中並在我的頁面中對其進行引用。

像這樣

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

我會apreciate任何commemnts或建議。

感謝

Answer 1

是的，你可以做到這一點（我用這個每次）。

讓我們假設你有一個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);

Answer 2

我最近就遇到了這個問題我自己。在查看jsRender代碼並學習其他JavaScript庫之後，我決定編寫自己的庫，以簡化加載外部模板，以便使用<link>標記將模板附加到html頁面，並通過簡單包含.js文件。如果你想看看，我已經發布在GitHub上的代碼示例：

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

該庫可與jsRender，以及能夠處理模板的任何代碼。

享受！

Answer 3

如果你想從本地文件加載外部模板，就像我一樣，讓我爲你節省一些挫折。 請勿使用balexandre的回答中推薦的jQuery $.get()。

使用$.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文件每次是一個功能我寫一次加載一個或多個外部模板。它也緩存模板，所以如果已經加載了它，它將不會再次加載。

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

使用它，像這樣：

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.' 
     }); 
    }); 
});