Come posso impostare in modo dinamico un nomeClass per una vista Backbone.js in base agli attributi del modello?

Question

Fondamentalmente quello che serve è di fare qualcosa di simile

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

Il problema è, che alla funzione passata a className viene eseguito nel contesto del HTML del modello di vista, quindi non posso chiamare this.model.

C'è un modo per accedere al modello a questo punto del processo di rendering? O devo impostare la classe più tardi, ad esempio nella funzione render?

Answer 1

Questo suona come un lavoro per il legame modello.

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

Sarebbe molto più semplice pensare di utilizzare this.$el.toggleClass o semplicemente aggiungere la classe all'interno di render.

Tuttavia, se si desidera impostare la classe quando si costruisce la vista, è possibile passare come opzione:

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

Answer 3

È consigliabile utilizzare l'attributi hash/funzione:

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