Set dynamically className on Backbone view render

backbone.js, classname, render

Solution

You will have to update your `class` manually after the `render` method. Backbone initializes the `className` of the element of your View only once time during the `_ensureElement` method:

_ensureElement: function() {
      if (!this.el) {
        var attrs = _.extend({}, _.result(this, 'attributes'));
        if (this.id) attrs.id = _.result(this, 'id');
        if (this.className) attrs['class'] = _.result(this, 'className');
        var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
        this.setElement($el, false);
      } else {
        this.setElement(_.result(this, 'el'), false);
      }
}

If you take a look it has a check in case of the element already exists. Anyway, you can do that manually in your `render` method:

render: function(){
   //Your logic
   this.$el.attr('class', _.result(this, 'className'));
}

Problem

I've a Backbone view where the className is set dynamically with a function: ``` app.Views.ItemRequestView = Backbone.View.extend({ tagName : 'tr', className : function(){ var classRow = ''; if(this.model.getState() == app.Models.Request.status.wait.key) { classRow = app.Models.Request.status.wait.color + ' bolder'; } else if(this.model.getState() == app.Models.Request.status.confirm.key){ classRow = app.Models.Request.status.confirm.color + ' bolder'; } return classRow; }, ``` When I update the model of the view I trigger a change event who render the view. The problem is that the className is not recalculate with the render... How can I recalculate the className when I render the view ? Anyone have an idea ? Thanks

Original source