Question

I tried to follow http://ricostacruz.com/backbone-patterns/#inline_templates to avoid http://ricostacruz.com/backbone-patterns/#abuse however I have a typical view like this:

// in app.js
App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    template: _.template($("#myTemplate").html()),
    render: function() 
    {
        this.$el.html(this.template(this.model.toJSON()));
    }

Then I just include app.js like this

<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="./js/underscore.js"></script>
<script src="./js/backbone.js"></script>
<script src="./js/app.js"></script>

Browser complains that the $("#myTemplate") line in App.MyView.template is null (because document is not ready?). What shall I do?

Answer 1

my quick fix for this was to compile the template on view initialisation..

App.MyView = Backbone.View.extend({
    className: "ui-widget-content",
    template: '#myTemplate',
    initialize: function(){
        this.template = _.template($(this.template).html());
    },
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    }

then everything else still works the same and you can put your render method in a base class..