如何绑定下划线模板和其他html文件？答案

【问题标题】：How to bind between the underscore template and other html files?如何绑定下划线模板和其他html文件？
【发布时间】：2017-02-27 10:53:56
【问题描述】：

我认为我的问题是在使用外部 html 文件时无法传递下划线模板参数，或者在使用主干.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>

我已经看到了许多与此问题相关的示例。我认为模型和集合创建没有问题，但我认为问题是由于无法绑定Underscore Template id和render function。

例如，this.template = _.template($('#list-template').html());

我使用 AJAX，然后加载了外部 html 文件，但是我不知道如何绑定模板 ID 和外部文件名？

我的页面没有打印任何错误，所以我不知道了。

提前感谢您的友好回答。

【问题讨论】：

标签： javascript jquery html templates backbone.js

【解决方案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>

【讨论】：