如何在下劃線模板和其他html文件之間進行綁定？

Question

我認爲我的問題我不能通過使用外部html文件時的下劃線模板參數或我使用backbone.js時使用不正確的方法。

請在我展示我的問題之前查看我的完整源代碼。

router.js

listRoute: function() { 
    var url = Backbone.history.getFragment(); 
    var view = {}; 
    var listData = {}; 
    var lists = {}; 
    var target = 'list'; 
    switch (url) { 
     case 'list/1': 
     listData = [{ 
      id : "1", 
      url : "/assets/videos/call/MOV01718.mp4", 
      imgSrc : "assets/img/call/1_thumbnail.png", 
      title: "call situation conservation" 
     }, 
     { 
      id : "2", 
      url : "/assets/videos/call/MOV01722.mp4", 
      imgSrc : "assets/img/call/2_thumbnail.png", 
      title: "call situation conservation" 
     }, 
     { 
      id : "3", 
      url : "/assets/videos/call/MOV01724.mp4", 
      imgSrc : "assets/img/call/2_thumbnail.png", 
      title: "call situation conservation" 
     }]; 
     lists = new this.collection(); 
     lists.add(listData); 
     view = new views.list({collection:lists}); 
     this.layout.setContent(view, target); 
     break; 

view.js

var content = this.content; 
    var pageSelect = this.target; 
    var subUrl = this.url; 
    if (content) content.remove(); 
    content = this.content = paramCount[0]; 
    pageSelect = this.target = paramCount[1]; 
    subUrl = this.url = paramCount[2]; 
    var templateName = subUrl; 
    var tmpl_dir = '../assets/static'; 
    var tmpl_url = tmpl_dir + '/' + templateName + '.html'; 
    var tmpl_string = ''; 

    $.ajax({ 
     url: tmpl_url, 
     method: 'GET', 
     async: false, 
     dataType : 'html', 
     success: function (data) { 
     tmpl_string = data; 
    } 
}); 
this.$content.html(content.render(tmpl_string).el); 

views.list = Backbone.View.extend({ 
    render: function(templateName) { 
     var template = _.template(templateName); 
     this.$el.html(template({result : this.collection.models})); 
     return this; 
    } 
}); 

list.html

<script type="text/template" id="list-template"> 
    <div id="columns"> 
    <% _.each(result, function(result){ %> 
    <div id="<% result.get('id') %>" class="content"> 
     <a href="<% result.get('url') %>"> 
     <figure> 
      <img src="<% result.get('imgSrc') %>"> 
      <figcaption><% result.get('title') %></figcaption> 
     </figure> 
    </div> 
    <% }); %> 
    </div> 
</script> 

我看到一個編號e的與此問題相關的xamples。 我認爲模型和集合創建沒有問題，但我認爲問題是由於無法綁定Underscore Template id和渲染函數。

例如，this.template = _.template($('#list-template').html());我使用AJAX，然後，外部HTML文件中加載但是，我不知道如何綁定模板ID和外部文件名

？

我的頁面不打印任何錯誤，所以我不知道了。

預先感謝您的答覆。

Answer 1

從list.html取出<script>標籤，從外部文件加載的時候都沒有必要，HTML文件應該是這樣的：

<div id="columns"> 
<% _.each(result, function(result){ %> 
<div id="<% result.get('id') %>" class="content"> 
    <a href="<% result.get('url') %>"> 
    <figure> 
     <img src="<% result.get('imgSrc') %>"> 
     <figcaption><% result.get('title') %></figcaption> 
    </figure> 
</div> 
<% }); %> 
</div>