10

Basically what I need is to do something like this

App.CommentView = Backbone.View.extend({
  className: function() {
    if (this.model.get('parent_id')) {
      return 'comment comment-reply';
    } else {
     return 'comment';
    }
  },

The problem is, that at the function passed to className is executed in context of the html of the view template, so I can't call this.model.

Is there any way I can access the model at this point in the rendering process? Or do I need to set the class later, for example in the render function?

mu is too short
  • 426,620
  • 70
  • 833
  • 800
Jakub Arnold
  • 85,596
  • 89
  • 230
  • 327

4 Answers4

14

This sounds like a job for model binding.

App.CommentView = Backbone.View.extend({
  initialize: function () {
      // anytime the model's name attribute changes
      this.listenTo(this.model, 'change:name', function (name) {
          if (name === 'hi') {
             this.$el.addClass('hi');
          } else if......
      });
  },
  render: function () {
       // do initial dynamic class set here
  }
Trevor
  • 11,269
  • 2
  • 33
  • 40
3

You should use the attributes hash/function: 

attributes: function () {
 //GET CLASS NAME FROM MODEL
 return { 'class' : this.getClass() }
},
getClass: function() {
   return this.model.get('classname')
}
mgm8870
  • 679
  • 1
  • 5
  • 10
2

It would be much easier I think to use this.$el.toggleClass or simply add the class inside render.

However if you want to set the class when constructing the view, you can pass it as an option:

view = new App.CommentView({
  model: model,
  className: model.get('parent_id') ? 'comment comment-reply' : 'comment'
})
ggozad
  • 13,105
  • 3
  • 40
  • 49
0

I did it at View initialize

App.CommentView = Backbone.View.extend({
    initialize: function() {
        if(this.model.get("parent_id"))
            this.$el.addClass("comment-reply");
    },
Pavel Zorin
  • 331
  • 6
  • 17