如何在下划线模板和其他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>