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模板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>

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

1 个答案: