Share
Backbone est en train de devenir très populaire en tant que framework de développement d'applications web. Cette popularité s'accompagne d'innombrables extensions et plug-ins permettant d'améliorer la puissance du framework et de combler les trous que d'autres ressentaient le besoin de combler. Voyons quelques-uns des meilleurs choix.
Développée par Derick Bailey, cette extension est assez grande et est ma préférée. Plutôt que d’ajouter une ou deux fonctionnalités à Backbone, Derick a décidé de combler tous les vides trous qui, à son avis, existaient. Voici ce qu'il en dit dans le fichier readme du projet GitHub.
"Backbone.Marionette est une bibliothèque d'applications composites pour Backbone.js qui vise à simplifier la construction d'applications JavaScript à grande échelle. Il s'agit d'une collection de modèles de conception et d'implémentation courants trouvés dans les applications que j'ai construites avec Backbone. et inclut divers éléments inspirés par des architectures d'applications composites, tels que le cadre "Prism" de Microsoft. "
Regardons de plus près ce que Marionette nous fournit:
Je n'ai fait qu'effleurer ce que Marionette peut faire. Je recommande vivement de se rendre sur GitHub et de lire leur documentation sur le wiki.
De plus, Andrew Burgess couvre Marionette dans son cours Tuts + Premium Advanced Backbone Patterns and Techniques..
Backbone.Validation est conçu pour combler une petite niche de problème: à savoir la validation de modèle. Il existe plusieurs extensions de validation pour Backbone, mais celle-ci semble avoir suscité le plus grand respect de la part de la communauté..
Plutôt que d'avoir à écrire un valider méthode pour vos modèles, vous pouvez créer un validation propriété pour vos modèles, qui est un objet qui spécifie chacun des attributs que vous souhaitez valider et une liste de règles de validation pour chacun de ces attributs. Vous pouvez également spécifier des messages d'erreur pour chaque attribut et transmettre des fonctions personnalisées pour la validation d'un seul attribut. Vous pouvez voir un exemple ci-dessous, qui est modifié à partir de l'un des exemples sur leur site Web.
var SomeModel = Backbone.Model.extend (validation: nom: requis: vrai, 'adresse.street': requis: vrai, 'adresse.zip': longueur: 4, age: plage: [1, 80], email: motif: 'email', // fournissez votre propre message d'erreur msg: "Entrez une adresse email valide", // fonction de validation personnalisée pour "someAttribute" someAttribute: function (value) if (value! == 'somevalue') return 'Message d'erreur';);
Il existe une multitude de validateurs intégrés et de modèles que vous pouvez vérifier, et il existe même un moyen d'étendre la liste avec vos propres validateurs globaux. Ce plugin Backbone ne rend pas la validation amusante, mais il élimine certainement toute excuse pour ne pas ajouter de validation. S'il vous plaît visitez leur site pour plus d'exemples et une explication plus profonde sur la façon d'utiliser ce merveilleux outil.
Backbone.LayoutManager vise à améliorer les vues de Backbone. Comme Backbone.Marionette, il introduit un code de nettoyage pour éviter les fuites de mémoire, gère l’ensemble du standard, et ne vous laisse que du code de configuration et du code spécifique à l’application. Contrairement à Marionette, LayoutManager se concentre spécifiquement sur les vues..
LayoutManager se concentrant uniquement sur les vues, il peut faire plus pour les vues que Marionette. Par exemple, LayoutManager est capable d'effectuer un rendu asynchrone, dans le cas où vous souhaitez charger dynamiquement vos modèles à partir de fichiers externes..
LayoutManager peut également gérer les sous-vues, mais de manière très différente de Marionette. Quoi qu’il en soit, il s’agit en grande partie de configuration, ce qui simplifie énormément les choses et élimine 90% du travail que vous auriez dû effectuer si vous tentiez de le mettre en œuvre vous-même. Jetez un oeil ci-dessous pour un exemple simple d'ajout de trois sous-vues à une vue:
Backbone.Layout.extend (vues: "en-tête": nouveau HeaderView (), "section": nouveau ContentView (), "pied de page": nouveau FooterView ());
Comme d'habitude, assurez-vous de vous référer à la page GitHub et à la documentation pour en savoir plus..
Backbone.ModelBinder crée des liens entre les données de vos modèles et le balisage affiché par vos vues. Vous pouvez déjà le faire en liant à l'événement change sur vos modèles et en rendant à nouveau la vue, mais ModelBinder est plus efficace et plus simple à utiliser..
Regardez le code ci-dessous:
Accentsconagua
var MyView = Backbone.View.extend (template: _.template (myTemplate), initialize: function () // Ancien chemin Backbone.js avec this.model.on ('change', this.render, this); / / ou le nouveau Backbone 0.9.10+ way this.listenTo (this.model, 'change', this.render);, render: function () this. $ el.html (this.template (this.model. toJSON ()));); Le problème avec cette approche est que chaque fois qu'un attribut est modifié, nous devons rendre à nouveau la vue entière. De plus, à chaque rendu, nous devons convertir le modèle en JSON. Enfin, si vous souhaitez que la liaison soit bidirectionnelle (lorsque le modèle est mis à jour, le DOM le fait de même et inversement), nous devons ajouter encore plus de logique à la vue..
Cet exemple utilisait Underscore modèle une fonction. Supposons que le modèle dans lequel nous avons passé ressemble à ceci:
Utiliser les tags <%= et %> faire le modèle fonction remplacer ces zones avec le Prénom et nom de famille propriétés qui existent dans le JSON que nous avons envoyé à partir du modèle. Nous supposerons que le modèle a ces deux attributs aussi.
Avec ModelBinder, nous pouvons à la place supprimer ces balises de gabarit et les envoyer en mode normal. HTML. ModelBinder verra la valeur de la prénom attribuer sur le contribution balise, et assignera automatiquement la valeur du modèle pour cette propriété à la valeur attribut de la balise. Par exemple, le premier contributionde prénom est réglé sur "prenom". Lorsque nous utilisons ModelBinder, nous verrons cela, puis définirons contributionde valeur au modèle Prénom propriété.
Ci-dessous, vous verrez à quoi notre exemple précédent ressemblerait après le passage à ModelBinder. En outre, sachez que la liaison est bidirectionnelle, donc si le contribution les tags sont mis à jour, le modèle sera mis à jour automatiquement pour nous.
Modèle HTML:
JavaScript Voir:
var MyView = Backbone.View.extend (template: myTemplate, initialize: function () // Pas plus de liaison ici, rendu: function () // Lance le droit HTML dans ce. $ el.html (this .template); // Utilisez ModelBinder pour lier le modèle et afficher modelBinder.bind (this.model, this.el););
Nous avons maintenant des modèles HTML propres, et nous n'avons besoin que d'une seule ligne de code pour lier le code HTML de la vue et les modèles à l'aide de modelBinder.bind. modelBinder.bind prend deux arguments obligatoires et un argument optionnel. Le premier argument est le modèle avec les données qui seront liées au DOM. Le second est le nœud DOM qui sera parcouru de manière récursive, à la recherche de liaisons à établir. Le dernier argument est un contraignant objet qui spécifie des règles avancées sur la manière dont les liaisons doivent être effectuées, si vous n'aimez pas l'utilisation par défaut.
ModelBinder peut être utilisé sur plus que juste contribution Mots clés. Cela fonctionne sur n'importe quel élément. Si l'élément est un type d'entrée de formulaire, tel que contribution, sélectionner, ou zone de texte, il va mettre à jour les valeurs de ces éléments, en conséquence. Si vous vous liez à un élément, tel qu'un div ou envergure, il placera les données du modèle entre les balises d’ouverture et de fermeture de cet élément (par exemple,. [les données vont ici]).
Backbone.ModelBinder a beaucoup plus de pouvoir que ce que j'ai démontré ici. Assurez-vous donc de lire la documentation sur le référentiel GitHub pour tout savoir à ce sujet..
Cela termine les choses. Je n'ai couvert qu'une poignée d'extensions et de plugins, mais ce sont ceux que je considère comme les plus utiles..
Le paysage de l'épine dorsale change constamment. Si vous souhaitez afficher une liste complète des différentes extensions Backbone disponibles, visitez cette page wiki, que l'équipe Backbone met à jour régulièrement..
