Uncaught ReferenceError using underscore template with backbone

Question

I'm trying to render some HTML using the underscore template function. The problem is I'm getting Uncaught ReferenceError: data is not defined when I load the script locally on my machine.

It seems to work on jsfiddle, but not in my environment and I have no idea why. Here is the working js fiddle.

and here is my code:

define([
    'jquery',
    'backbone',
    'underscore',
    'moment',
    'bootstrap-modal',
    'domReady!'
], function (
    $,
    Backbone,
    _,
    moment
) {

'use strict';

/**
 * Represents a booking modal view
 */
return Backbone.View.extend({

    defaults: {

        modalHeadingHtml: '<div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> <h4 class="modal-title"><%= data.title %></h4> </div>',
        modalBodyHtml: null,
        modalFooterHtml: null

    },

    template: _.template('<div class="modal-dialog"><div class="modal-content"><%= data.content %></div></div>'),

    className: 'wl-car-book-modal modal wl-modal fade',

    /**
     * Initializes booking modal view.
     */
    initialize: function (options) {

        this.options = _.extend({}, this.defaults, this.options);

        $('body').append(this.render().el);

        this.$el.modal()

        var data = {data: { title: 'fooo'}};
        var tpl = _.template(this.options.modalHeadingHtml);

        this.$('.modal-content').append(tpl(data));

        this.open();

    },

    render: function() {


        var wrapperHtml = this.template({data: {content: 'test'}});

        this.$el.html(wrapperHtml);

        return this;

    },

    open: function() {
        this.$el.modal('show');
    },

    close: function() {
        this.$el.modal('hide');
    }

});
});

Yes there are some differences, but mainly it's just about the apparent undefined variable in the initialize function.

Any help would be greatly appreciated, thanks.

Didn't found this.$el.modal() in the fiddle, it's a lot different. Also, how are you instantiating the view ? Have you verified that the view's el has modal function. — coding_idiot

mhanney mhanney · Accepted Answer · 2014-12-11T22:37:38

My guess is that modal() in this.$el.modal() is the thing that is undefined. Check your define([]) block. What's the full path for 'bootstrap-modal'? What do you see in Chrome dev tools in the Sources tab? Is require loading bootstrap.js for 'bootstrap-modal'? It probably works in jsfiddle because modal() is defined by some other method of including bootstrap.js. this.$el.modal() could use a semicolon at the end of line too, but that isn't why it's not working.

Uncaught ReferenceError using underscore template with backbone

1 Answers