骨幹內嵌HTML模板與外部模板

我的骨幹應用目前其模板內嵌HTML如下：骨幹內嵌HTML模板與外部模板

<body> 
<div id="container"> 
    <header></header> 
    <nav></nav> 
     <div id="pagecontent"></div> 
    <footer></footer> 
</div> 


     <!-- Featured Articles/Homepage Template --> 
<script type="text/template" id="featuredarticles"> 
    <link rel="stylesheet" href="css/homepagecontent.css" /> 
    <section id="banner"></section> 
     <aside> 
      <div></div> 
      <div></div> 
     </aside> 
     <section id="main"></section> 
     <section id="opinion"> 
      <div></div> 
      <div></div> 
      <div></div> 
     </section> 
     <section id="travel"> 
      <div></div> 
      <div></div> 
      <div></div> 
     </section> 
</script> 

    <!-- Content Articles Template --> 
    <script type="text/template" id="contentarticles"> 
     <link rel="stylesheet" href="css/categorypagecontent.css" /> 
     <section id="main"></section> 
     <aside></aside> 
    </script> 

    <!-- Require.js reference --> 
    <script src="/js/libs/require.js" data-main="/js/app.js"></script> 

</body>

能I /我應該外部化HTML來代替。如果是這樣，我怎麼會外化這個（即使用View），所以它是如下：

 <!-- Featured Articles/Homepage Template --> 
<script type="text/template" id="featuredarticles"> 
<!-- HTML rendered externally -->    
</script> 

    <!-- Content Articles Template --> 
    <script type="text/template" id="contentarticles"> 
    <!-- HTML rendered externally --> 
    </script>

下面是我如何使目前從視圖模板的片段：

define(['underscore', 'backbone', 'collections/bannerCollection', 'collections/featuredArticlesCollection', ], function (_, Backbone, bannerCollection, featuredArticlesCollection) { 
var featuredArticlesView = Backbone.View.extend({ 
    el: $('#pagecontent'), 
    initialize: function() { 
     this.render(); 
    }, 
    render: function() { 
     var that = this; 
     var template = _.template($('#featuredarticles').html(), {}); 
     that.$el.html(template); 
return that; 
    } 
}); 

return featuredArticlesView; 

});

我一直在閱讀部分內容，但需要一些關於最佳實踐的指導，以及內聯HTML應該如何/如何分解。

來源

2014-10-10 Kode

你已經採取了看看requirejs 「文本」模塊？ https://github.com/requirejs/text – McGarnagle 2014-10-10 20:46:42

我剛開始考慮這一點。我會仔細看看。 – Kode 2014-10-10 20:51:04

您也可以將您的Underscore模板預編譯爲JavaScript服務器端的位。 't = _.template（x）'在't'中給你留下了一個JavaScript函數，並且源代碼可以在't.source'中找到。順便說一下，'_.template'的形式是[不再可用，你必須立即編譯和調用。]（http://stackoverflow.com/a/25881231/4798630） – 2014-10-10 20:54:31

我發現我前陣子模板經理的這個小片段（不記得筆者，不好意思）：

TemplateManager = { templates: {}, // holds the templates cache get: function(id, callback){ var template = this.templates[id]; if (template) { // return the cached version if it exists callback(template); } else { var that = this; // fetch, cache and return the template $.get(id + ".html", function(template) { that.templates[id] = template; callback(that.templates[id]); }); } } };

它獲取模板文件，緩存它和後調用回調函數它加載，就像這樣：

TemplateManager.get('path/to/your/template', function(resp) { // resp is the template markup return this; });

希望它能幫助。

UPDATE

這裏是工作提琴：

http://jsfiddle.net/411jgf78/1/

來源

2014-10-10 20:40:32 mocanuga

它確實，很想看到一個工作的例子，但至少我可以開始搜索模板管理。 – Kode 2014-10-10 20:52:37

這種方法的不足之處在於，它會觸發每個視圖的單獨網絡（ajax）調用（由於緩存而每次只能調用一次）。 – McGarnagle 2014-10-10 20:59:28

您還可以如何加載遠程模板？如果你擴展了這個想法，你可以將模板緩存在localStorage中，這樣它可以在後續的頁面刷新和甚至會話中使用。 – mocanuga 2014-10-11 12:02:04

骨幹內嵌HTML模板與外部模板

回答

相關問題