Question

The line below is completely failing.

template: _.template($('#test').html()),

Trying to follow a simple example from https://github.com/ccoenraets/backbone-jquerymobile to use jQuery mobile along with Backbone.js. The error I’m getting in the web inspector is: TypeError: ‘null’ is not an object (evaluating ‘str.replace’) which is in line 913 of the underscore.js. Using is _.template in this fashion:

template: _.template("<h1>To Do</h1>"),

works, but in order to incorporate the jQuery mobile styles, that way won’t do.

todo.js

TodoBb.Views.ComCentersTodo = Backbone.View.extend({

template: _.template($('#test').html()),


render: function() {
    $(this.el).html(this.template());
    return this;
}
});

main.html

<script type = 'text/template' id = 'test'> <h1>To Do</h1> </script>

Answer 1

The DOM isn’t ready when your view is being parsed:

TodoBb.Views.ComCentersTodo = Backbone.View.extend({
    template: _.template($('#test').html()),
    //...
});

so $('#test').html() is null and you’re actually doing this:

TodoBb.Views.ComCentersTodo = Backbone.View.extend({
    template: _.template(null),
    //...
});

The internals of _.template use replace while converting the template to a JavaScript function.

You have a few options:

1. Put the TodoBd.Views.ComCentersTodo definition inside a $(document).ready() handler:

   $(function() {
       TodoBb.Views.ComCentersTodo = Backbone.View.extend({
           template: _.template($('#test').html()),
           //...
       });
   });
   

2. Don’t compile the template until you need it:

   TodoBb.Views.ComCentersTodo = Backbone.View.extend({
       //... no template in here
       render: function() {
           var html = _.template($('#test').html(), this.model.toJSON());
           this.$el.html(html);
           return this;
       },
       //...
   });
   

As a variation of 2, you could cache the compiled template functions somewhere and only call _.template($('#test').html()) the first time you use it.