Épine dorsale modèle de changement de Vue
Je suis assez nouveau à l'épine Dorsale et la question est la suivante:
J'ai une collection de modèles.
J'ai une collection de visualiser l'affichage des onglets (avec une vue pour chaque modèle de la collection).
J'ai une vision pour un modèle (pour le contenu).
J'ai un routeur avec les routes.
Ce que je suis en train de réaliser est l'une des fonctionnalités comme le http://jqueryui.com/demos/tabs/
Je clique sur un onglet (modèle de la collection) et que vous voulez passer le modèle de la vue de contenu peut-être le changer et de refléter les changements dans la collection.
Je suis venu avec quatre solutions:
Dans le routeur:
'switchCommunity': function(id) {
//(a) set new model attributes
this.view.community.model.set(communities.get(id));
//(b) replace model
this.view.community.model = communities.get(id);
//(c) a custom function of the view changes its model
this.view.community.changeModel(communities.get(id));
//(d) a new view
this.view.community = new View({
model: communities.get(id)
})
}
Le problème ici est
-
(a) ne pas tenir compte des modifications du modèle dans le
collection -
(b) ne déclenche pas (changement) des événements, parce que la liaison dans le
fonction d'initialisation de la vue jamais déclenche, parce que c'est
un complètement nouveau modèle -
(c) semble être un hack pour moi
-
(d) chaque fois que je clique sur un onglet, une nouvelle vue est créée (est-ce un
problème de performance?)
Quelle est la meilleure pratique ici?
- Je voudrais essayer d) - ce n'est pas de devenir un problème de performances si vous supprimez l'ancien point de vue d'abord.
- en (d) j'ai remplacer mon ce.vue.la communauté est-ce suffisant ou dois-je le supprimer manuellement?
- Cela devrait être suffisant, tant que le vieux dom éléments ne sont pas traîner et ont des écouteurs d'événement lié à eux, ils doivent être des ordures collectées. J'aimerais vérifier avec firebug, mais je pense que c'est correct.
- J'ai toujours ajouter une méthode close de mon point de vue qui supprime de la cathédrale de déliaison tous bacbone et d'événements dom.
- Merci pour ce très utile! Option (d) est également pas une bonne option, car si vous avez des écouteurs d'événement sur votre (sub), ils s'accumule lorsque de nouvelles (sous -) vues sont créées
Vous devez vous connecter pour publier un commentaire.
L'un de vos solution est proche d'être d'accord 😀
Ici est ce que vous voulez:
Et cela va déclencher modèle.sur("changement") ainsi.
communities.get(id).attributes
aussi fonctionne et semble plus propre à moi.Pourquoi pensez-vous que (c) est un hack? Il semble être un bon endroit pour encapsuler la déliaison de l'ancien modèle, et le raccordement de la nouvelle.
La De la colonne vertébrale.Marionnette plugin fournit une solution rationalisée pour votre problème.
Il fournit des fonctionnalités pour l'Initialisation de l'Application, la Gestion des vues, et de l'Agrégation d'Événements.
En substance, il prend la douleur hors de masquage et affichage de plusieurs vues.
Vous pouvez lire ce post de blog pour en savoir plus à ce sujet.
La réponse courte est que vous devez utiliser d. Oui se n'est pas performant mais à moins d'avis ralentissement de l'interface utilisateur, vous ne devriez pas trop vous inquiéter. Vous devez coder quelque chose que 1. fonctionne toujours 2. ne prend pas longtemps pour le code de sorte que vous pouvez passer au codage d'autres éléments plus importants.
Si/quand vous avez besoin de plus de performances, alors vous pouvez prendre le temps de faire c. Pour être le plus performant, vous ne devriez pas le détruire et de le rendre à nouveau modèles. Vous devez utiliser jquery pour rechercher manuellement les éléments du DOM et de les remplacer par le nouveau modèle. Lorsque vous composez le:
C'est très peu de code, mais beaucoup de travail pour le navigateur. Remplacement du DOM avec un nouveau modèle est beaucoup plus performant.
Si vous avez besoin d'être plus performant, vous pouvez utiliser l'objet de la mutualisation. J'ai travaillé sur un PerfView pour la colonne vertébrale qui implémente un lot d'optimisations. https://github.com/puppybits/BackboneJS-PerfView Il y a des commentaires dans le code, avec beaucoup de meilleures pratiques afin de maintenir les meilleures performances du navigateur.