Question

var myView = Backbone.View.extend({
    tagName: 'div',
    className: function() {
        return this.model.isNew() ? 'new' : 'old';
    }

That’s the functionality I would like, but it doesn’t work. I’m not sure when the class name is determined, but the callee is just the element itself; in this case, it would be <div></div>. Is there a way to give className access to the model?

I can, and currently, put another div in my template, in order to control the class, but that div is definitely not needed if I am able to control the class name from the View itself.

Answer 1

If it were me, I’d probably set that type of class within render() use a helper function:

var myView = Backbone.View.extend({
    render: function() {
        this.applyClass();
        return this;
    },

    applyClass: function() {
        var isNew = this.model.isNew();
        $(this.el)
            .toggleClass('new', isNew)
            .toggleClass('old', !isNew);
    }
});

You could then reuse applyClass in an event handler later if you need to:

    initialize: function(options) {
        this.model.bind('change', this.applyClass, this);
    }