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

我看过很多与这个问题相关的例子。我认为模型和集合创建没有问题，但我认为问题是由于无法绑定 Underscore Template id 和 render 函数。

例如，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>

如何在下划线模板和其他 html 文件之间进行绑定？

How to bind between the underscore template and other html files?

html

javascript

jquery

templates

backbone.js