Une vue attend normalement un objet avec ces attributs avant de pouvoir effectuer le rendu:
{ el: '#someelement', model: someModel }
Une vue nous permet également de lier les événements du modèle aux fonctions de la vue:
initialize: function() {
this.model.bind('change', this.renderFromModel, this);
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
renderFromModel: function() {
var t = _.template($('#some-template').html());
$('item-' + this.cid).html(t(this.toJSON()));
return this;
},
Le problème est que la première fois que nous instancions une vue pour le rendu, elle attend un objet contenant un modèle; et la deuxième fois que nous rendons la vue lorsqu'elle est appelée depuis le modèle, elle ne l'est pas. Pour cette raison, je finis par créer deux fonctions render ().
Existe-t-il un meilleur moyen d'obtenir un rendu d'élément unique qui peut également répondre aux événements model.change ()?
je pense que vous devez vous assurer que votre méthode de rendu est toujours liée à la vue en appelant la méthode bindAll de underscore.js.
SomeView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
this.model.bind('change', this.render);
},
render: function(){
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
Une meilleure solution consiste à utiliser la fonction listenTo :
SomeView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.model, 'change', this.render);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
De cette façon, l'objet view est au courant des liaisons qu'il a faites, et toutes peuvent être supprimées avec la fonction stopListening et n'a pas besoin d'appeler explicitement bind ou bindAll. Enfin, le code est plus propre à mon avis.
Utilisez la méthode _.bind () pour définir la portée
this.model.bind('change', _.bind(this.render, this));
Depuis Backbone 0.9.2 (et peut-être plus tôt), la fonction on()
ou bind()
(ainsi que son homologue off()
ou unbind()
) prend un paramètre context
facultatif à utiliser pour this
lors de son appel.
Alors,
SomeView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
this.model.bind('change', this.render);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
peut devenir
SomeView = Backbone.View.extend({
initialize: function(){
this.model.bind('change', this.render, this);
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Voir la documentation de on()
.
créer une instance de modèle dans la vue
var myapp.myView = new View({
model: new Model
});
et lorsque vous initialisez le Backbone.View à l'intérieur, ajoutez ceci .. quel rendu sera appelé chaque fois qu'il y aura un changement, les attributs du modèle sont ses valeurs par défaut
this.model.bind('change', this.render,this)