如何導入充滿Underscore模板的文件？

正如預期中的任何項目，我的主HTML文件的90％是由許多不同的模板，就像這樣：如何導入充滿Underscore模板的文件？

<script type="text/template" id="template-parametros"> 
    <div id="parametros"> 
    <h2>Parâmetros</h2> 
    <table id="tab-parametros"> 
     <tr><td>Descrição</td><td>Tipo</td><td>Locale</td></tr> 
    </table> 
    <button id="parametros-ad">Adicionar</button> 
    </div> 
</script>

我願意把他們在其他地方，所以UX人可以工作他們自己。將它們放在另一個文件中很容易，但是如何在稍後導入它們？我嘗試過，但瀏覽器嘗試，當然，失敗，將其解釋爲JavaScript代碼。 type =「text」也失敗。任何想法？

謝謝！

來源

2012-08-15 konr

重複的？ http://stackoverflow.com/questions/8366733/external-template-in-underscore | http://stackoverflow.com/questions/9834714/external-html-template-for-underscore-js-and-backbone-js | http://stackoverflow.com/questions/8594295/use-one-large-external-file-for-many-javascript-templates-with-backbone-js – fguillen 2012-08-16 07:57:00

我使用了一個模塊加載器（requireJS），它有一個文本插件。它允許您將模板文件定義爲參數並在Backbone視圖中使用。

帶有require的骨幹視圖看起來像這樣。

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!/templates/templateFileName.html' // Define the template using text! plugin 
], function($, _, Backbone, myTemplate) { // Include the template as an argument 
    "use strict"; 

    ViewName = Backbone.View.extend({ 
     template: _.template(myTemplate), // Setup my template (underscore) 
     events: { 
      ... 
     }, 
     initialize: function() { 
      ...  
     }, 
     render: function() { 
      $(this.el).html(this.template()); // render the template 
      return this; 
     } 
    }); 

    return ViewName; 
});

要增加這一點，使用下劃線的_.template()很容易插值。

說我templateFileName.html看起來像這樣

<section> 
    <div> 
     <%= name %> 
    </div> 
    <div> 
     <%= age %> 
    </div> 
</section>

所有你需要做的就是在哈希通過這些屬性名稱來填充HTML。

var myHash = {"name":"Felix", "age":"9"}; 

$(this.el).html(this.template(myHash));

來源

2012-08-16 01:29:55 jmk2142

怎麼樣：

if (!async) async = false; 
$.ajax({ 
    async: async, 
    url: '/template/' + templateId, 
    dataType: 'json', 
    success: function(response) { 
     $('body').append(response.content); 
    } 
});

來源

2012-08-17 01:29:46 lecstor

如何導入充滿Underscore模板的文件？

回答

相關問題