Load template by URL in backbone js

Question

I have created a View in backbone to render a collection. It uses a template to format data and the template HTML is written in a string variable. Now the template is becoming complex and I need to store it in a separate file. Is there any way in backbone to load template from URL and what is the best design pattern in this scenario. Following is the code:

var PageView = Backbone.View.extend({
    template: _.template("<% _.each(items,function (item) { %><tr><td><%= item.page_id %></td><td><%= item.title %></td></tr><% }); %>"),

    initialize: function () {
        _.bindAll(this, 'render');
        this.model.bind('all', this.render);
    },

    render: function () {
        this.$el.html(this.template({
            items: this.model.toJSON()
        }));
    }

});

Is there anything like templateURL so that it can be loaded dynamically from another file on server.

There is similar question here http://stackoverflow.com/questions/8366733/external-template-in-underscore?lq=1. May be you get your solution here. — Dhanu Gurung, Dec 22 '13 at 14:16

pcatre · Accepted Answer · 2013-12-23T23:35:37.673

Backbone itself does not provide a way to do this, but there are a number of different ways to accomplish this and there are plenty of examples on how to set up the required mechanisms.

If you choose to use RequireJs (and I would advise you to do so eventually… taking into consideration you will need some time to learn it) you will also need RequireJS’s text plugin. There is a tutorial for using RequireJS and the text plugin in backbone projects available at backbone tutorials.

After setting up the project loading external templates in a backbone view is as simple as defining them as a dependency of the view and passing that dependency to a variable (projectListTemplate in the following example):

define([
  'jquery',
  'underscore',
  'backbone',
  // Using the Require.js text! plugin, we load raw text
  // which will be used as our views primary template
  'text!templates/project/list.html'
], function($, _, Backbone, projectListTemplate){
  var ProjectListView = Backbone.View.extend({
    el: $('#container'),
    render: function(){
      // Using Underscore we can compile our template with data
      var data = {};
      var compiledTemplate = _.template( projectListTemplate, data );
      // Append our compiled template to this Views "el"
      this.$el.append( compiledTemplate );
    }
  });
  // Our module now returns our view
  return ProjectListView;
});

Another possible approach, if you don’t feel ready to use RequireJS and you want to move the templates to different files right away would be to use a simple custom template loader. Christophe Coenraets wrote his own and used it in an example backbone project. He made all the source code available on github and he also provides tutorials and explanations.

He wrote about his method for externalizing templates, in the the first section “Externalizing Templates”.

I read require Js docs, its logical but will make my application more complex. Second one is simple and works for me. Thanks — asim-ishaq, Dec 23 '13 at 13:33

score 0 · Answer 2 · answered Dec 22 '13 at 14:31

0

I would use require.js for this, it might feel like an overkill at start, but eventually it will pay off big time.

http://requirejs.org/

answered Dec 22 '13 at 14:31

ekeren

3,408
3
35
55

score 0 · Answer 3 · answered Jan 22 '17 at 13:48

ReuireJS is a good route, but a bit of an overkill, and adding to that the fact that we're using a requireJS plugin on top of that - I decided not to use it. My solution was to JQuery $.get the template HTML prior to loading the View, and then with the result load the View defining the template in the constructor, then to be called as options.template:

var template = $.get("/templates/needed_template.html")
                        .done(function (res) {
                            ns.myView = new MyView({template: res});
                            ns.myView.render();
                        })

On the View side, I've added this:

initialize: function() {
   this.template = _.template(this.options.template);

Load template by URL in backbone js

3 Answers3