Construire un gestionnaire de contacts en utilisant Backbone.js Partie 1 / Code

Dans ce didacticiel, nous allons créer un gestionnaire de contacts entièrement fonctionnel à l’aide de Backbone.js, Underscore.js et jQuery. Nous allons examiner les composants de base qui font fonctionner Backbone, ainsi que certaines des méthodes pratiques décrites par Underscore..

Que sont exactement toutes ces bibliothèques??

Backbone est un cadre architectural qui nous permet de créer facilement des applications JavaScript non triviales à l'aide d'une organisation et d'une structure de style MVC. Le backbone n’est pas considéré comme un vrai MVC - C s’applique à Collection, pas à Controller, mais il offre toujours les mêmes avantages et nous permet d’écrire un code puissant et maintenable..

Underscore est une bibliothèque d’utilitaires qui fournit des fonctionnalités améliorées à JavaScript, en ajoutant des fonctions supplémentaires pour travailler avec des tableaux, des collections, des fonctions et des objets..

Commencer

Nous aurons besoin d’un dossier de projet racine contenant css, img et js sous-dossiers, alors allez-y et créez-les maintenant. Nous allons commencer avec la page HTML suivante:

Enregistrer ceci sous index.html dans le dossier du projet racine. Underscore.js est la seule exigence obligatoire de Backbone, mais nous souhaitons également utiliser jQuery afin que nous puissions créer un lien vers ces deux bibliothèques avant Backbone. Le code de notre application ira dans app.js et tous les styles iront dans screen.css. Sur la page, nous avons un conteneur vide qui constituera la base de notre application..

Nous pouvons ensuite créer le fichier JavaScript squelettique que nous remplirons progressivement au cours de cette série. Dans un nouveau fichier, ajoutez le code suivant:

Enregistrer ceci dans le js dossier en tant que app.js. Nous placerons tout notre code dans une fonction anonyme que nous invoquerons immédiatement, aliasing jQuery en tant que $ personnage. Est également défini à ce stade un tableau d'objets où chaque objet représente un contact..

Nous allons utiliser ce magasin de données local pour cette partie du didacticiel, car cela nous permet d’obtenir un script opérationnel sans trop s’inquiéter de la synchronisation avec un serveur. Nous garderons cela pour un autre jour!

Des modèles

Un modèle représente les données d'une application. dans notre application, ce sera un contact individuel, qui aura des attributs tels qu'un nom, un numéro de contact, etc. Vous pouvez dire qu'un modèle individuel représente la partie atomique de l'application - la plus petite unité de fonctionnalité possible. Ajoutez le code suivant directement après le tableau de données:

Pour créer un modèle dans Backbone, nous étendons simplement la Backbone.Model classe en utilisant le étendre() méthode. Nous pouvons passer un objet dans la méthode, ce qui nous permet de personnaliser le modèle avec nos propres fonctionnalités. Une des propriétés que nous pouvons définir dans cet objet s'appelle défauts. Cette propriété nous permet de configurer les valeurs par défaut pour tout attribut que nous souhaiterions que nos modèles aient..

Dans ce cas, nous définissons une image de marque de réservation comme valeur par défaut de photo attribut pour les instances de modèle. Tous les modèles qui ne possèdent pas cet attribut une fois défini le recevront.

Les modèles ont d'autres propriétés que nous pouvons utiliser pour ajouter des fonctionnalités; on pourrait définir un initialiser() méthode, et cette méthode serait invoquée automatiquement par Backbone pour nous lorsque chaque modèle est initialisé. Nous n'en ferons pas usage pour le moment, mais ne vous inquiétez pas, nous reviendrons sur les modèles un peu plus tard..

Des collections

Une collection est une classe permettant de gérer des groupes de modèles. Nous utiliserons un exemple simple dans cet exemple pour stocker tous nos contacts. Ajoutez le code suivant directement après le Contact modèle:

Comme un modèle, une collection est une classe Backbone que nous étendons pour ajouter des fonctionnalités personnalisées spécifiques à notre application. Les collections ont aussi un étendre() méthode, et il accepte un objet qui nous permet de définir les propriétés de la classe et d’ajouter un comportement. Nous utilisons le modèle propriété pour indiquer à la collection la classe à partir de laquelle chaque élément de la collection doit être construit, qui est dans ce cas une instance de notre Contact modèle. Ne vous inquiétez pas du fait que les classes que nous avons définies semblent extrêmement simples, nous y reviendrons et ajouterons des fonctionnalités supplémentaires dans des parties ultérieures du didacticiel..

Des vues

Les vues sont responsables de l'affichage des données de l'application dans une page HTML. Un des avantages de la séparation des parties de l’application qui traitent les données et des parties qui affichent les données est qu’il est très facile d’apporter une modification à l’une sans nécessiter de modifications importantes de l’autre. Nous utiliserons quelques vues dans notre application, la première devant être ajoutée directement après la Annuaire classe:

Cette vue gère l'affichage d'un contact individuel. Tout comme les modèles et les collections, les vues ont une étendre() méthode utilisée pour étendre la Backbone.View classe. Nous définissons plusieurs propriétés d'instance de notre point de vue. la tagName Cette propriété est utilisée pour spécifier le conteneur de la vue et le nom du cours properties spécifie un nom de classe ajouté à ce conteneur. Nous utiliserons un modèle simple dans notre fichier HTML pour générer le rendu de chaque contact. modèle property stocke une référence en cache au modèle, que nous sélectionnons dans la page à l'aide de jQuery.

Ensuite nous définissons un rendre() une fonction; cette fonction n'est pas invoquée automatiquement par Backbone et, bien que nous puissions l'appeler depuis l'invocation automatique initialiser() méthode pour rendre la vue auto-rendu, on n'a pas besoin dans ce cas.

Dans le rendre() méthode, nous stockons une référence à Underscore modèle() méthode et lui transmettre le modèle stocké. Lorsqu'un argument unique contenant un modèle est passé, Underscore ne l'appelle pas immédiatement, mais renvoie une méthode pouvant être appelée afin de rendre le modèle..

élément créé par la vue vers le modèle interpolé à l'aide de celui de jQuery html () méthode de commodité. Cela est fait en appelant la fonction de gabarit que Underscore a renvoyée précédemment et en lui transmettant les données à interpoler. Les données sont obtenues à partir du modèle à l'aide de Backbone toJSON () méthode sur le modèle. L'interpolation signifie simplement que les jetons du modèle sont remplacés par les données réelles. Notez aussi que nous utilisons $ el définir le contenu HTML; il s'agit d'un objet jQuery mis en cache représentant l'élément actuel, évitant ainsi de devoir créer de nouveaux objets jQuery..

À la fin de rendre() méthode, on retourne le ce objet, qui pointe vers l'instance de vue que le rendre() la méthode est appelée. C’est pour que nous puissions chaîner d’autres méthodes Backbone à l’instance de la vue après avoir appelé son rendre() méthode.

Micro-gabarit avec soulignement

Ce serait probablement le moment opportun pour examiner les fonctionnalités de micro-modèles intégrées à Underscore. Souligner fournit le modèle() méthode que nous avons vu pour consommer et interpoler des modèles. A la page HTML, nous devrions ajouter le modèle que nous allons utiliser; ajoutez le code suivant directement après le conteneur de contacts

Nous utilisons un > élément avec un identifiant attribuer afin que nous puissions facilement le sélectionner, et une coutume type attribut pour que le navigateur n'essaye pas de l'exécuter. Dans le modèle, nous spécifions la structure HTML que nous souhaitons utiliser et utilisons jetons pour spécifier où les données du modèle doivent être insérées. Underscore peut être utilisé avec quelques autres fonctionnalités, notamment l'interpolation de valeurs échappées au format HTML ou l'exécution de JavaScript arbitraire, mais nous n'avons pas besoin de les utiliser pour les besoins de ce didacticiel..

 
 Une vue de maître
 Pour terminer cette partie du tutoriel, nous allons créer une vue supplémentaire. Notre vue actuelle représente chaque contact individuel et est donc mappée sur un modèle au 1: 1. Mais cette vue n’est pas autonome et nous ne l’avons pas encore invoquée. Ce dont nous avons besoin, c’est d’une vue qui mappe 1: 1 à notre collection, d’une vue principale qui fournira le nombre correct de vues de contacts pour afficher chacun de nos contacts. Directement après le ContactVue, ajoutez la classe suivante:
 var DirectoryView = Backbone.View.extend (el: $ ("# contacts"), initialisez: fonction () this.collection = new Répertoire (contacts); this.render ();, rendu: function ()  var que = this; _.each (this.collection.models, fonction (item) that.renderContact (item);, this);, renderContact: fonction (item) var contactView = new ContactView (modèle: item); this. $ el.append (contactView.render (). el););
 Cette vue sera attachée à un élément qui existe déjà sur la page, le conteneur vide codé en dur dans le , donc nous sélectionnons l'élément avec jQuery et le définissons comme le el propriété. Quand alors définir un simple initialiser() fonction qui crée une instance de notre classe de collection et appelle ensuite sa propre rendre() méthode, rendant cette vue auto-rendu.
 Nous définissons ensuite le rendre() méthode pour notre vue principale. Dans la fonction, nous stockons une référence à la vue afin de pouvoir y accéder dans une fonction de rappel, puis nous utilisons Underscore. chaque() méthode pour parcourir chaque modèle de notre collection.
 Cette méthode accepte deux arguments (sous cette forme, bien qu'elle puisse également être utilisée avec un seul argument); le premier est la collection d'éléments à parcourir, le second est une fonction anonyme à exécuter pour chaque élément. Cette fonction de rappel accepte l'élément en cours en tant qu'argument. Tout ce que nous faisons dans cette fonction de rappel est d’appeler le renderContact () méthode et lui passer l'élément en cours.
 Enfin, nous définissons le renderContact () méthode. Dans cette méthode, nous créons une nouvelle instance de notre ContactVue classe (rappelez-vous, le ContactVue classe représente un contact individuel) et définissez son modèle propriété de l'élément passé dans la méthode. Nous ajoutons ensuite l'élément créé en appelant la vue rendre() méthode à la $ el propriété du DirectoryView vue principale (le conteneur vide que nous avons sélectionné dans la page). le $ el La propriété est un objet jQuery mis en cache que Backbone crée automatiquement pour nous..
 La vue principale est chargée de générer chaque modèle individuel au sein de notre collection. Tout ce que nous avons à faire, c’est d’initialiser notre vue principale. En raison de son rendu automatique, tous les contacts spécifiés dans le tableau de données factices seront affichés:
 var répertoire = new DirectoryView ();
 Lorsque nous exécutons cette page dans un navigateur, nous devrions voir une représentation visuelle de nos données:
  Backbone crée une instance d'un modèle pour chaque élément de notre tableau d'origine, qui sont stockés dans notre collection et rendus sous forme d'instance d'une vue..
 Ce tutoriel ne concerne pas les CSS, je n'ai donc pas du tout traité de l'exemple CSS. Si vous êtes curieux, jetez un coup d’œil à la feuille de style incluse dans l’archive de démonstration..
 
 Résumé
 Dans cette partie du didacticiel, nous avons abordé certains des composants essentiels de Backbone.js; modèles, collections et vues. Les modèles sont des classes que nous pouvons créer pour stocker des données sur un objet particulier et définir son comportement. Les collections servent à gérer des groupes de modèles et les vues nous permettent de restituer nos modèles à l'aide de modèles interpolés affichant les données de nos modèles..
 Dans la prochaine partie du didacticiel, nous verrons comment filtrer notre collection pour n'afficher qu'un sous-ensemble de nos modèles. Nous allons également jeter un oeil à un autre composant majeur de Backbone - Routers.



		
			
	   
	




Code