在渲染前使用requireJs和BackboneJs合併多個模板

Question

我想在使用requireJs和requiteJs文本插件的BackboneJs中實現每個視圖中多個模板的想法。

這是我的視圖代碼 - 你可以看到我已經通過了兩個模板在我的define（）女巫獲得成功通過。

define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){ 

var BlogPostIndexView = Backbone.View.extend({ 

    initialize: function() { 
     var $template = $(Template); 

     $template.prepend(ElementList); 

     this.template = _.template($template.html()); 

    }, 

    render: function (Template) { 
     this.$el.html(this.template({posts : this.collection})); 
     return this; 
    }, 

    add: function() { 

    } 

}); 

return BlogPostIndexView; }); 

你可以看到我試圖將第二個模板結合到第一個模板的html中。這工作，但不幸的是，當我再使我得到這個....

<div class="outer-wrapper"> 
<div id="blog-post-wrapper"> 
    <h1>texting views</h1> 
</div> 

<ul> 
    <% _.each(posts, function(post){ %> 
     <li><%= post.title %></li> 
    <% }); %> 
</ul> 

Answer 1

我缺少結束標記的外包裝紙，但讓想這應該是關閉「UL」標籤後和你的模板看起來如下：

container.html

<div class="outer-wrapper"> 
    <div id="blog-post-wrapper"> 
     <h1>texting views</h1> 
    </div> 
</div> 

list.html

<ul> 
    <% _.each(posts, function(post){ %> 
     <li><%= post.title %></li> 
    <% }); %> 
</ul> 

代碼：

define([..."container.html", "list.html"...], function (...container, list...) { 
... 
initialize: function() { 
    // container: 
    // no need to compile 'container' if there are no variables.. 

    // list: 
    this.listTemplate = _.template(list); 
} 
... 
render: function() { 
    var $container = $(container); 
    $container.append(this.listTemplate({...})); 
    this.$el.html($container); 
} 

BTW：檢查這個文本替代https://github.com/tbranyen/lodash-template-loader