CODEWITHSUNDEEP
javascriptjqueryhtmltemplatesbackbone.js
Liquid.Bear
Liquid.Bear

Reputation: 333

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

I think my problem i can not pass underscore template arguments when using external html files or I use incorrect method when using backbone.js.

Please see the my entire source before i demonstrate my problem.

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>

I have seen a number of examples related to this problem. I think there is no problem with model and collection creation, but I think the problem is due to the inability to bind Underscore Template id and render function.

For example, this.template = _.template($('#list-template').html());

I using AJAX and then, external html file loaded but, I don't know how to bind template id and external file name?

The my page doesn't print any error so, i don't know anymore.

Thank in advance, your kind answer.

Upvotes: 1

Views: 774

Answers (1)

mikeapr4
mikeapr4

Reputation: 2856

Remove the <script> tags from list.html, they aren't necessary when loading from an external file, the HTML file should look like this:

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

Upvotes: 1

Related Questions