J'ai une configuration de vue imbriquée qui peut être un peu plus profonde dans mon application. Il y a un tas de façons dont je pourrais penser à l'initialisation, au rendu et à l'ajout des sous-vues, mais je me demande quelle est la pratique courante.
En voici quelques-uns auxquels j'ai pensé:
initialize : function () {
this.subView1 = new Subview({options});
this.subView2 = new Subview({options});
},
render : function () {
this.$el.html(this.template());
this.subView1.setElement('.some-el').render();
this.subView2.setElement('.some-el').render();
}
Avantages: Vous n'avez pas à vous soucier de maintenir le bon ordre DOM avec l'ajout. Les vues sont initialisées très tôt, il n'y a donc pas grand chose à faire en même temps dans la fonction de rendu.
Inconvénients: Vous êtes obligé de re-déléguer les événements (), ce qui peut être coûteux? La fonction de rendu de la vue parente est encombrée de tout le rendu de sous-vue qui doit se produire? Vous n'avez pas la possibilité de définir les tagName
éléments, le modèle doit donc conserver les bons tagNames.
Autrement:
initialize : function () {
},
render : function () {
this.$el.empty();
this.subView1 = new Subview({options});
this.subView2 = new Subview({options});
this.$el.append(this.subView1.render().el, this.subView2.render().el);
}
Pour: Vous n'avez pas à déléguer à nouveau des événements. Vous n'avez pas besoin d'un modèle contenant uniquement des espaces réservés vides et votre tagName est de nouveau défini par la vue.
Inconvénients: vous devez maintenant vous assurer d'ajouter les éléments dans le bon ordre. Le rendu de la vue parente est toujours encombré par le rendu de la sous-vue.
Avec un onRender
événement:
initialize : function () {
this.on('render', this.onRender);
this.subView1 = new Subview({options});
this.subView2 = new Subview({options});
},
render : function () {
this.$el.html(this.template);
//other stuff
return this.trigger('render');
},
onRender : function () {
this.subView1.setElement('.some-el').render();
this.subView2.setElement('.some-el').render();
}
Avantages: La logique de sous-vue est désormais séparée de la render()
méthode de la vue .
Avec un onRender
événement:
initialize : function () {
this.on('render', this.onRender);
},
render : function () {
this.$el.html(this.template);
//other stuff
return this.trigger('render');
},
onRender : function () {
this.subView1 = new Subview();
this.subView2 = new Subview();
this.subView1.setElement('.some-el').render();
this.subView2.setElement('.some-el').render();
}
J'ai en quelque sorte mélangé et mis en correspondance un tas de pratiques différentes dans tous ces exemples (désolé à ce sujet) mais quelles sont celles que vous conserveriez ou ajouteriez? et que ne feriez-vous pas?
Résumé des pratiques:
- Instancier des sous-vues dans
initialize
ou dansrender
? - Exécuter toute la logique de rendu de sous-vue dans
render
ou dansonRender
? - Utilisez
setElement
ouappend/appendTo
?
close
méthode et une onClose
qui nettoie les enfants, mais je suis juste curieux de savoir comment les instancier et les rendre en premier lieu.
delete
dans JS n'est pas le même que celui delete
de C ++. C'est un mot-clé très mal nommé si vous me demandez.