uncaught TypeError: Cannot call method 'replace' of undefined backbone.js

Question

I 'm trying to develop a simple RSS app using backbone.js. I 'm using this backbone.js tutorial. I 'm getting the following error, on line 2(template), when defining the template. Can someone also tell me why is tagName: "li" defined in the tutorial?

uncaught TypeError: Cannot call method 'replace' of undefined backbone.js

Javscript

window.SourceListView = Backbone.View.extend({
    tagName:"li",
    template: _.template($('#tmpl_sourcelist').html()),

    initialize:function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

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

    close:function () {
        $(this.el).unbind();
        $(this.el).remove();
    }
});

HTML

 <script type="text/template" id="tmpl_sourcelist">
                        <div id="source">
                        <a href='#Source/<%=id%>'<%=name%></a>
                        </div>
                </script>

thanks

try running the template without the data and see what you get...this.$el.html(this.template()) — beNerd
– beNerd, Commented Feb 12, 2013 at 5:59
It errors out at line2(template: _.template($('#tmpl_sourcelist').html()),). Not sure what are you recommending. — jsp
– jsp, Commented Feb 12, 2013 at 6:01

mu is too short · Accepted Answer · 2013-08-07 18:34:32Z

47

You're getting your error right here:

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

Part of _.template's internals involves calling String#replace on the uncompiled template text on the way to producing the compiled template function. That particular error usually means that you're effectively saying this:

_.template(undefined)

That can happen if there is no #tmpl_sourcelist in the DOM when you say $('#tmpl_sourcelist').html().

There are a few simple solutions:

Adjust your <script> order so that your #tmpl_sourcelist comes before you try to load your view.

Create the compiled template function in your view's initialize instead of in the view's "class" definition:

window.SourceListView = Backbone.View.extend({
    tagName:"li",
    initialize:function () {
        this.template = _.template($('#tmpl_sourcelist').html());
        //...

As far as tagName goes, the fine manual has this to say:

el view.el

[...] this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

So having this in your view:

tagName: 'li'

means that Backbone will automatically create a new <li> element as your view's el.

edited Aug 7, 2013 at 18:34

answered Feb 12, 2013 at 6:02

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anthony Over a year ago

great answer! It helped me out in my situation because $("#target").html(_.template(template, [posts])); was looking for an id = target but it was a class.

mu is too short Over a year ago

@Anthony: Thanks. So the same _.template(undefined) problem in disguise then.

Collectives™ on Stack Overflow

uncaught TypeError: Cannot call method 'replace' of undefined backbone.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related