Jak mogę dynamicznie ustawić nazwę klasy dla widoku Backbone.js na podstawie jego atrybutów modelu?

Question

Zasadniczo co potrzebne jest, aby zrobić coś takiego

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

Problem polega na tym, że w funkcji przekazany do className jest wykonywany w kontekście html szablonu widoku, więc nie mogę nazwać this.model.

Czy jest jakiś sposób uzyskania dostępu do modelu w tym momencie procesu renderowania? Czy muszę ustawić klasę później, na przykład w funkcji render?

Answer 1

To brzmi jak zadanie dla modelu wiążące.

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 
    } 

Answer 2

Byłoby znacznie łatwiejsze myślę, aby użyć this.$el.toggleClass lub po prostu dodać klasę wewnątrz render.

Jednak jeśli chcesz ustawić klasę przy konstruowaniu pogląd, można przekazać go jako opcja:

view = new App.CommentView({ 
    model: model, 
    className: model.get('parent_id') ? 'comment comment-reply' : 'comment' 
}) 

Answer 3

Należy użyć atrybutów hash/funkcja:

attributes: function() { 
//GET CLASS NAME FROM MODEL 
return { 'class' : this.getClass() } 
}, 
getClass: function() { 
    return this.model.get('classname') 
}