Gestion des événements pour plusieurs instances de composants de vol Twitter

Je vise une architecture d'interface utilisateur découplée. Je veux que les composants de carrousel et de pagination soient séparés les uns des autres; mais avec la pagination capable d'écouter les changements sur un événement 'uiCarouselMoved'.

Example: http://jsbin.com/uQadehI/1/edit?html,js,output

Le problème se pose lorsque j'ai deux instances de carrousels et de pagination respectivement. J'aimerais connaître le meilleur modèle de conception dans Twitter Flight pour gérer un «pont» entre les composants Carousel et Pagination, sans dépendre d'une logique non pertinente telle que la structure arborescente du DOM, et de préférence pas d'ID codé en dur.

Alors, est-il possible de savoir quelle pagination mettre à jour, en fonction du carrousel source?

0

2 Réponses

Créer un mélange de pagination et le mélanger au carrousel semblerait avoir du sens.

Une autre option consiste à utiliser le DOM pour fournir une structure. En attachant une instance de pagination et de carrousel au même noeud ou arborescence DOM, vous créez une relation non déclarative entre les deux.

Vous pouvez également générer un ID unique (en utilisant, par exemple, _.uniqueId http://underscorejs.org/#uniqueId) et passer cela avec les données du carrousel. Cela peut également être inclus dans la réponse, permettant aux composants de déterminer s'ils sont intéressés par des événements globaux.

TweetDeck utilise ces trois méthodes dans plusieurs cas. L'utilisation du DOM pour la structure ne nécessite aucun standard supplémentaire, bien que ce soit aussi la relation la plus implicite. L'utilisation des identifiants est très spécifique, mais nécessite des informations supplémentaires dans les déclencheurs d'événements et les gestionnaires. L'utilisation d'un mixin ne nécessite aucun standard et est très spécifique mais crée une dépendance que vous pouvez éviter.

4
ajouté
Merci pour votre réponse complète Tom! J'ai marqué Ryan comme correct parce que l'exemple fourni semble bien aller. Je comprends les problèmes avec les dépendances, cependant.
ajouté l'auteur joecritch, source
Bonjour Tom. Pouvez-vous montrer un exemple du deuxième cas? (comment utiliser le DOM pour fournir la structure)
ajouté l'auteur Vadim Sanko, source

Je voudrais faire pagination et carrousel mixins , avec_carousel et avec_pagination respectivement , au lieu de composants individuels. Cela vous permettra d'utiliser les deux dans le même composant et d'attacher ce composant à un nouveau nœud dom de niveau externe. Cela vous permettra d'écouter localement l'événement uiCarouselMoved au lieu d'attacher l'écouteur au document.

An example is here: http://jsbin.com/iZeLABAW/1/edit

1
ajouté
Merci Ryan, j'aime cette solution. Des accessoires pour l'exemple aussi.
ajouté l'auteur joecritch, source
C'est un bel exemple. Une suggestion: Vous pouvez supprimer le chaque dans this.changeCurrentIndicator et changer son corps en une version plus courte: this.select ('indicateurs'). RemoveClass (this .attr.currentClass & zwnj;) .eq (data.index) .add & zwnj; Classe (this.attr.curr & zwnj; entClass);
ajouté l'auteur Rudi, source
J'aurais dû nommer les fonctions withCarousel et withPagination par convention. Les fichiers seront nommés avec_carousel.js et with_pagination.js.
ajouté l'auteur Ryan O'Neill, source