BackboneJS - Guide rapide
BackboneJS est un lightweight JavaScript libraryqui permet de développer et de structurer les applications côté client qui s'exécutent dans un navigateur Web. Il offre un cadre MVC qui extrait les données dans des modèles, DOM dans des vues et lie ces deux à l'aide d'événements.
History- backbone.js a été développé par Jeremy Ashkenas et a été initialement publié le 13 Octobre th 2010.
Quand utiliser Backbone
Considérez que vous créez une application avec de nombreuses lignes de code en utilisant JavaScript ou jQuery. Dans cette application, si vous -
ajouter ou remplacer des éléments DOM à l'application ou
faire quelques demandes ou
afficher l'animation dans l'application ou
ajoutez plus de nombre de lignes à votre code,
alors votre application pourrait devenir compliquée.
Si vous souhaitez une meilleure conception avec moins de code, il est préférable d'utiliser la bibliothèque BackboneJS qui fournit de bonnes fonctionnalités, est bien organisée et structurée pour développer votre application.
BackboneJS communique via des événements; cela garantit que vous ne gâchez pas l'application. Votre code sera plus propre, plus agréable et facile à entretenir.
traits
Voici une liste des fonctionnalités de BackboneJS -
BackboneJS permet de développer des applications et le frontend d'une manière beaucoup plus simple en utilisant des fonctions JavaScript.
BackboneJS fournit divers blocs de construction tels que des modèles, des vues, des événements, des routeurs et des collections pour assembler les applications Web côté client.
Lorsqu'un modèle change, il met automatiquement à jour le HTML de votre application.
BackboneJS est une bibliothèque simple qui permet de séparer la logique métier et la logique de l'interface utilisateur.
Il s'agit d'une bibliothèque gratuite et open source et contient plus de 100 extensions disponibles.
Il agit comme une épine dorsale pour votre projet et aide à organiser votre code.
Il gère le modèle de données qui comprend les données utilisateur et affiche ces données côté serveur avec le même format écrit côté client.
BackboneJS a une dépendance douce avec jQuery et une forte dépendance avec Underscore.js.
Il permet de créer des applications Web côté client ou des applications mobiles dans un format bien structuré et organisé.
BackboneJS est très facile à installer et à utiliser. Ce chapitre traite du téléchargement et de la configuration duBackboneJS Library.
BackboneJS peut être utilisé des deux manières suivantes -
- Téléchargement de la bibliothèque d'interface utilisateur depuis son site officiel.
- Téléchargement de la bibliothèque d'interface utilisateur à partir de CDN.
Téléchargement de la bibliothèque d'interface utilisateur depuis son site officiel
Lorsque vous ouvrez le lien http://backbonejs.org/, vous verrez une capture d'écran comme indiqué ci-dessous -
Comme vous pouvez le voir, il existe trois options pour télécharger cette bibliothèque -
Development Version - Faites un clic droit sur ce bouton et enregistrez-le sous et vous obtenez la source complète JavaScript library.
Production Version - Faites un clic droit sur ce bouton et enregistrez sous et vous obtenez le Backbone-min.js library fichier qui est compressé et compressé.
Edge Version - Faites un clic droit sur ce bouton et enregistrez sous et vous obtenez un unreleased version, c'est-à-dire que le développement est en cours; vous devez donc l'utiliser à vos propres risques.
Dépendances
BackboneJS dépend des fichiers JavaScript suivants -
Underscore.js- C'est la seule dépendance dure qui doit être incluse. Vous pouvez l'obtenir d' ici .
jQuery.js- Incluez ce fichier pour la persistance RESTful, la prise en charge de l'historique via Backbone.Router et la manipulation DOM avec Backbone.View. Vous pouvez l'obtenir d' ici .
json2.js- Incluez ce fichier pour la prise en charge d'Internet Explorer plus ancienne. Vous pouvez l'obtenir d' ici .
Télécharger la bibliothèque d'interface utilisateur à partir de CDN
Un CDN ou Content Delivery Networkest un réseau de serveurs conçu pour servir des fichiers aux utilisateurs. Si vous utilisez un lien CDN dans votre page Web, il transfère la responsabilité de l'hébergement des fichiers de vos propres serveurs vers une série de serveurs externes. Cela offre également un avantage: si le visiteur de votre page Web a déjà téléchargé une copie de BackboneJS à partir du même CDN, il n'aura pas à être retéléchargé.
Comme indiqué ci-dessus, BackboneJS a une dépendance du JavaScript suivant -
- jQuery
- Underscore
Par conséquent CDN pour tout ce qui précède est le suivant -
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript"
src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type = "text/javascript"
src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>Note - Nous utilisons les versions CDN de la bibliothèque tout au long de ce tutoriel.
Exemple
Créons un exemple simple en utilisant BackboneJS.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
<title>Hello World using Backbone.js</title>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<div id = "container">Loading...</div>
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type = "text/javascript">
var AppView = Backbone.View.extend ({
// el - stands for element. Every view has an element associated with HTML content, will be rendered.
el: '#container',
// It's the first function called when this view is instantiated.
initialize: function() {
this.render();
},
// $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
//Like the Hello TutorialsPoint in this case.
render: function() {
this.$el.html("Hello TutorialsPoint!!!");
}
});
var appView = new AppView();
</script>
</body>
</html>Les commentaires de code sont explicites. Quelques détails supplémentaires sont donnés ci-dessous -
Il y a un code html au début de la balise body
<div id = "container">Loading...</div>Cette imprime Loading...
Ensuite, nous avons ajouté les CDN suivants
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
type = "text/javascript"></script>Ensuite, nous avons le script suivant -
var AppView = Backbone.View.extend ({
// el - stands for element. Every view has an element associated with HTML content,
//will be rendered.
el: '#container',
// It's the first function called when this view is instantiated.
initialize: function() {
this.render();
},
// $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
//Like the Hello World in this case.
render: function() {
this.$el.html("<h1>Hello TutorialsPoint!!!</h1>");
}
});
var appView = new AppView();Les commentaires sont explicites. Dans la dernière ligne, nous initialisonsnew AppView(). Cela imprimera le "Hello TutorialsPoint" dans lediv with id = "container"
Enregistrer cette page sous myFirstExample.html. Ouvrez-le dans votre navigateur et l'écran affichera le texte suivant.
Le BackboneJS donne une structure aux applications Web qui permet de séparer la logique métier et la logique d'interface utilisateur. Dans ce chapitre, nous allons discuter du style architectural de l'application BackboneJS pour l'implémentation des interfaces utilisateur. Le schéma suivant montre l'architecture de BackboneJS -
L'architecture de BackboneJS contient les modules suivants -
- Requête HTTP
- Router
- View
- Events
- Model
- Collection
- La source de données
Parlons maintenant de tous les modules en détail.
Requête HTTP
Le client HTTP envoie une requête HTTP à un serveur sous la forme d'un message de requête où les navigateurs Web, les moteurs de recherche, etc., agissent comme des clients HTTP. L'utilisateur demande un fichier tel que des documents, des images, etc., en utilisant le protocole de requête HTTP. Dans le diagramme ci-dessus, vous pouvez voir que le client HTTP utilise le routeur pour envoyer la demande du client.
Routeur
Il est utilisé pour acheminer les applications côté client et les connecte aux actions et événements à l'aide d'URL. Il s'agit d'une représentation URL des objets de l'application. Cette URL est modifiée manuellement par l'utilisateur. L'URL est utilisée par le backbone afin qu'il puisse comprendre l'état de l'application à envoyer ou à présenter à l'utilisateur.
Le routeur est un mécanisme qui peut copier les URL pour atteindre la vue. Le routeur est requis lorsque les applications Web fournissent des URL pouvant être liées, mises en signet et partageables pour des emplacements importants dans l'application.
Dans l'architecture ci-dessus, le routeur envoie une requête HTTP à View. C'est une fonctionnalité utile lorsqu'une application a besoin d'une capacité de routage.
Vue
Les vues BackboneJS sont responsables de la manière et des éléments à afficher à partir de notre application et elles ne contiennent pas de balisage HTML pour l'application. Il spécifie une idée derrière la présentation des données du modèle à l'utilisateur. Les vues sont utilisées pour refléter «à quoi ressemble votre modèle de données».
Les classes de vues ne savent rien sur le HTML et le CSS et chaque vue peut être mise à jour indépendamment lorsque le modèle change sans recharger la page entière. Il représente le bloc logique de l'interface utilisateur dans le DOM.
Comme le montre l'architecture ci-dessus, la vue représente l'interface utilisateur qui est chargée d'afficher la réponse à la demande de l'utilisateur effectuée à l'aide du routeur.
Événements
Les événements sont les parties principales de toute application. Il lie les événements personnalisés de l'utilisateur à une application. Ils peuvent être mélangés dans n'importe quel objet et sont capables de lier et de déclencher des événements personnalisés. Vous pouvez lier les événements personnalisés en utilisant le nom souhaité de votre choix.
En règle générale, les événements sont gérés de manière synchrone avec leur flux de programme. Dans l'architecture ci-dessus, vous pouvez voir lorsqu'un événement se produit, il représente les données du modèle à l'aide de la vue.
Modèle
C'est le cœur de l'application JavaScript qui récupère et remplit les données. Les modèles contiennent les données d'une application, la logique des données et représentent l'objet de données de base dans le cadre.
Les modèles représentent des entités commerciales avec une logique métier et des validations métier. Ils sont principalement utilisés pour le stockage de données et la logique métier. Les modèles peuvent être récupérés et enregistrés dans le stockage de données. Un modèle prend la requête HTTP des événements passés par la vue à l'aide du routeur et synchronise les données de la base de données et renvoie la réponse au client.
Collection
Une collection est un ensemble de modèles qui lie des événements, lorsque le modèle a été modifié dans la collection. La collection contient une liste de modèles qui peuvent être traités dans la boucle et prend en charge le tri et le filtrage. Lors de la création d'une collection, nous pouvons définir le type de modèle que cette collection va avoir avec l'instance de propriétés. Tout événement déclenché sur un modèle se déclenchera également sur la collection dans le modèle.
Il prend également la demande de la vue, lie les événements et synchronise les données avec les données demandées et renvoie la réponse au client HTTP.
La source de données
Il s'agit de la connexion établie à une base de données depuis un serveur et contient les informations qui sont demandées au client. Le flux de l'architecture BackboneJS peut être décrit comme indiqué dans les étapes suivantes -
Un utilisateur demande les données à l'aide du routeur, qui achemine les applications vers les événements en utilisant les URL.
La vue représente les données du modèle pour l'utilisateur.
Le modèle et la collection récupèrent et remplissent les données de la base de données en liant des événements personnalisés.
Dans le chapitre suivant, nous comprendrons la signification des événements dans BackboneJS.
Les événements sont capables de lier des objets et de déclencher des événements personnalisés, c'est-à-dire que vous pouvez lier les événements personnalisés en utilisant le nom souhaité de notre choix.
Le tableau suivant répertorie toutes les méthodes que vous pouvez utiliser pour manipuler les BackboneJS-Events -
| S.No. | Méthodes et description |
|---|---|
| 1 | sur Il lie un événement à un objet et exécute le rappel chaque fois qu'un événement est déclenché. |
| 2 | de Il supprime les fonctions de rappel ou tous les événements d'un objet. |
| 3 | déclencheur Il appelle les fonctions de rappel pour les événements donnés. |
| 4 | une fois que Il étend la classe backbone.Model tout en créant votre propre modèle de backbone. |
| 5 | Ecouter Il informe un objet d'écouter un événement sur un autre objet. |
| 6 | arrêter l'écoute Il peut être utilisé pour arrêter d'écouter les événements sur les autres objets. |
| sept | ListenToOnce Cela provoque le listenTo une seule fois avant la suppression de la fonction de rappel. |
Catalogue des événements intégrés
BackboneJS permet l'utilisation d'événements globaux partout où cela est nécessaire dans votre application. Il contient certains des événements intégrés avec des arguments comme indiqué dans le tableau suivant -
| S.No. | Événements et description |
|---|---|
| 1 | "add"(model, collection, options) Il est utilisé lorsqu'un modèle est ajouté à la collection. |
| 2 | "remove"(model, collection, options) Il supprime un modèle de la collection. |
| 3 | "reset"(collection, options) Il est utilisé pour réinitialiser le contenu de la collection. |
| 4 | "sort"(collection, options) Il est utilisé lorsqu'une collection doit être utilisée. |
| 5 | "change"(model, options) Il est utilisé lorsque des modifications doivent être apportées aux attributs d'un modèle. |
| 6 | "change:[attribute]"(model, value, options) Il est utilisé lorsqu'il y a une mise à jour dans un attribut. |
| sept | "destroy"(model, collection, options) Il se déclenche lorsque le modèle est détruit. |
| 8 | "request"(model_or_collection, xhr, options) Il est utilisé lorsqu'un modèle ou une collection commence à demander au serveur. |
| 9 | "sync"(model_or_collection, resp, options) Il est utilisé lorsqu'un modèle ou une collection est synchronisé avec succès avec le serveur. |
| dix | "error"(model_or_collection, resp, options) Il s'active lorsqu'il y a une erreur lors de la demande au serveur. |
| 11 | "invalid"(model, error, options) En cas d'échec de la validation du modèle, il renvoie invalide. |
| 12 | "route:[name]"(params) Lorsqu'il existe une correspondance d'itinéraire spécifique, cet événement peut être utilisé. |
| 13 | "route"(route,params) Il est utilisé lorsqu'il y a correspondance avec n'importe quel itinéraire. |
| 14 | "route"(router, route, params) Il est utilisé par l'historique lorsqu'il y a correspondance avec n'importe quel itinéraire. |
| 15 | "all" Il se déclenche pour tous les événements déclenchés en passant le nom de l'événement comme premier argument. |
Les modèles contiennent des données dynamiques et leur logique. Les logiques telles que les conversions, les validations, les propriétés calculées et le contrôle d'accès relèvent de la catégorie Modèle. Comme il contient toutes les données d'application, un modèle est également appeléheart of JavaScript application.
Le tableau suivant répertorie toutes les méthodes que vous pouvez utiliser pour manipuler le modèle BackboneJS -
| S.No. | Méthodes et description |
|---|---|
| 1 | étendre Il étend le backbone.Model classe tout en créant votre propre modèle de base. |
| 2 | initialiser Lorsqu'une instance de modèle est créée, le constructeur de la classe est appelé et il est appelé en définissant la fonction d'initialisation lors de la création du modèle. |
| 3 | avoir Il obtient la valeur d'un attribut sur le modèle. |
| 4 | ensemble Il définit la valeur d'un attribut dans le modèle. |
| 5 | échapper C'est comme le get , mais renvoie la version échappée HTML de l'attribut d'un modèle. |
| 6 | a Renvoie true, si la valeur d'attribut est définie avec une valeur non nulle ou une valeur non indéfinie. |
| sept | désarmé Il supprime un attribut d'un modèle de backbone. |
| 8 | clair Supprime tous les attributs, y compris l'attribut id d'un modèle de backbone. |
| 9 | id Il identifie de manière unique l'entité de modèle, qui peut être définie manuellement lorsqu'un modèle est créé ou rempli ou lorsqu'un modèle est enregistré sur le serveur. |
| dix | idAttribute Définit l'identifiant unique d'un modèle qui contient le nom du membre de la classe qui sera utilisé comme id. |
| 11 | cid Il s'agit d'un identifiant client généré automatiquement par Backbone qui identifie de manière unique le modèle sur le client. |
| 12 | les attributs Les attributs définissent la propriété d'un modèle. |
| 13 | modifié Modifie tous les attributs qui ont changé après avoir défini les attributs à l'aide du set() méthode. |
| 14 | valeurs par défaut Définit une valeur par défaut pour un modèle, ce qui signifie que si l'utilisateur ne spécifie aucune donnée, le modèle ne tombera pas avec une propriété vide. |
| 15 | toJSON Renvoie une copie des attributs en tant qu'objet pour la stringification JSON. |
| 16 | synchroniser Il est utilisé pour communiquer avec le serveur et pour représenter l'état d'un modèle. |
| 17 | chercher Acceptez les données du serveur en déléguant sync() méthode dans le modèle. |
| 18 | enregistrer Enregistre les données du modèle en déléguant à sync() qui lit et enregistre le modèle à chaque fois qu'un Backbone l'appelle. |
| 19 | détruire Détruit ou supprime le modèle du serveur en utilisant le Backbone.sync méthode qui délègue la requête HTTP "suppression". |
| 20 | valider Si l'entrée n'est pas valide, elle renvoie un message d'erreur spécifié ou si l'entrée est valide, elle ne spécifie rien et affiche simplement le résultat. |
| 21 | erreur de validation Il affiche l'erreur de validation, si la validation échoue ou après le invalid l'événement est déclenché. |
| 22 | est valable Il vérifie l'état du modèle en utilisant le validate() méthode et vérifie également les validations pour chaque attribut. |
| 23 | URL Il est utilisé pour l'instance du modèle et renvoie l'url de l'emplacement de la ressource du modèle. |
| 24 | urlRoot Active la fonction url en utilisant l'ID de modèle pour générer l'URL. |
| 25 | analyser Renvoie les données du modèle en passant par l'objet de réponse et représente les données au format JSON. |
| 26 | cloner Il est utilisé pour créer une copie complète d'un modèle ou pour copier un objet de modèle dans un autre objet. |
| 27 | a changé Renvoie true, si l'attribut est modifié depuis le dernier set. |
| 28 | est nouveau Détermine si le modèle est nouveau ou existant. |
| 29 | changéAttributs Il renvoie les attributs du modèle qui ont changé depuis le dernier set ou bien devient faux, s'il n'y a pas d'attributs. |
| 30 | précédent Il détermine la valeur précédente de l'attribut modifié. |
| 31 | précédentAttributs Renvoie l'état de tous les attributs avant le dernier événement de modification. |
Méthodes de soulignement
Il y a six Underscore.js méthodes qui fournissent leurs fonctionnalités à utiliser sur le Backbone.Model.
| S.No. | Méthodes et description |
|---|---|
| 1 | _.keys(object) Il est utilisé pour accéder aux propriétés énumérables de l'objet. |
| 2 | _.values(object) Il est utilisé pour obtenir les valeurs des propriétés de l'objet. |
| 3 | _.pairs(object) Il décrit les propriétés de l'objet en termes de paires valeur / clé. |
| 4 | _.invert(object) Il renvoie la copie d'objet, dans laquelle les clés sont devenues les valeurs et vice versa. |
| 5 | _.pick(object, *keys) Il renvoie la copie de l'objet et indique les clés à récupérer. |
| 6 | _.omit(object, *keys) Il renvoie la copie de l'objet et indique les clés à omettre. |
Les collections sont des ensembles ordonnés de modèles. Nous avons juste besoin d'étendre la classe de collection du backbone pour créer notre propre collection. Tout événement déclenché sur un modèle dans une collection sera également déclenché directement sur la collection. Cela vous permet d'écouter les modifications apportées à des attributs spécifiques dans n'importe quel modèle d'une collection.
Le tableau suivant répertorie toutes les méthodes que vous pouvez utiliser pour manipuler la BackboneJS-Collection -
| S.No. | Méthodes et description |
|---|---|
| 1 | étendre Étend la classe de collection de la dorsale pour créer une collection. |
| 2 | modèle Pour spécifier la classe de modèle, nous devons remplacer la propriété de modèle de la classe de collection. |
| 3 | initialiser Lorsqu'une instance de modèle est créée, elle est appelée en définissant la fonction d'initialisation lors de la création de la collection. |
| 4 | des modèles Tableau de modèles créés à l'intérieur de la collection. |
| 5 | toJSON Renvoie la copie des attributs d'un modèle en utilisant le format JSON dans la collection. |
| 6 | synchroniser Il représente l'état du modèle et utilise Backbone.sync pour afficher l'état de la collection. |
| sept | ajouter Ajoutez un modèle ou un tableau de modèles à la collection. |
| 8 | retirer Supprime un modèle ou un tableau de modèles de la collection. |
| 9 | réinitialiser Il réinitialise la collection et remplit avec un nouveau tableau de modèles ou vide la collection entière. |
| dix | ensemble Il est utilisé pour mettre à jour la collection avec un ensemble d'éléments dans un modèle. Si un nouveau modèle est trouvé, les éléments seront ajoutés à ce modèle. |
| 11 | avoir Il est utilisé pour récupérer le modèle d'une collection en utilisant le idor cid. |
| 12 | à Récupérez le modèle d'une collection à l'aide de l'index spécifié. |
| 13 | pousser Elle est similaire à la méthode add () qui prend le tableau de modèles et pousse les modèles vers la collection. |
| 14 | pop Elle est similaire à la méthode remove () qui prend le tableau de modèles et supprime les modèles de la collection. |
| 15 | décaler Ajoutez un modèle spécifié au début d'une collection. |
| 16 | décalage Il supprime le premier élément de la collection. |
| 17 | tranche Affiche la copie superficielle des éléments du modèle de collection. |
| 18 | longueur Compte le nombre de modèles de la collection. |
| 19 | comparateur Il est utilisé pour trier les éléments de la collection. |
| 20 | Trier Trie les éléments de la collection et utilise la propriété de comparateur afin de trier les éléments. |
| 21 | cueillir Récupère les attributs du modèle dans la collection. |
| 22 | où Il est utilisé pour afficher le modèle à l'aide de l'attribut correspondant dans la collection. |
| 23 | trouverOù Il renvoie le modèle qui correspond à l'attribut spécifié dans la collection. |
| 24 | URL Il crée une instance de la collection et renvoie où se trouvent les ressources. |
| 25 | analyser Renvoie les données de la collection en passant par l'objet de réponse et représente les données au format JSON. |
| 26 | cloner Il renvoie la copie superficielle de l'objet spécifié. |
| 27 | chercher Il extrait les données du modèle dans la collection à l'aide de la méthode sync. |
| 28 | créer Il crée une nouvelle instance du modèle dans la collection. |
Méthodes de soulignement
Le tableau suivant répertorie les Underscore.js méthodes qui fournissent leurs fonctionnalités à utiliser sur le Backbone.Collection.
| S.No. | Méthodes et description |
|---|---|
| 1 | _.each(list, iteratee, [context]) Itère chacun des éléments de la collection à l'aide de la fonction iteratee. |
| 2 | _.map(list, iteratee, [context]) Il mappe chaque valeur et les affiche dans un nouveau tableau de valeurs à l'aide du iteratee fonction. |
| 3 | _.reduce(list, iteratee, memo, [context]) Il réduit la liste de valeurs en une seule valeur et il est également connu sous le nom de inject et foldl. |
| 4 | _.reduceRight(list, iteratee, memo, [context]) C'est la bonne version associative de reduce. |
| 5 | _.find(list, predicate, [context]) Il trouve chaque valeur et renvoie la première qui passe le prédicat ou le test. |
| 6 | _.filter(list, predicate, [context]) Il filtre chaque valeur et renvoie le tableau de valeurs qui passe le prédicat ou le test. |
| sept | _.reject(list, predicate, [context]) Il renvoie les éléments rejetés de la liste qui ne transmettent pas les valeurs prédites. |
| 8 | _.every(list, predicate, [context]) Elle renvoie true si les éléments de la liste transmettent les valeurs prédites. |
| 9 | _.some(list, predicate, [context]) Elle renvoie true si les éléments de la liste transmettent les valeurs prédites. |
| dix | _.contains(list, value, [fromIndex]) Il renvoie true, si une valeur est présente dans la liste. |
| 11 | _.invoke(list, methodName, *arguments) Il invoque le nom de la méthode en utilisant methodName() sur chaque valeur de la liste. |
| 12 | _.max(list, [iteratee], [context]) Il spécifie la valeur maximale de la liste. |
| 13 | _.min(list, [iteratee], [context]) Il spécifie la valeur minimale dans la liste. |
| 14 | _.sortBy(list, [iteratee], [context]) Il renvoie les éléments triés dans l'ordre croissant en utilisant iteratee dans la liste. |
| 15 | _.groupBy(list, [iteratee], [context]) Il divise les valeurs de la collection en ensembles, regroupés à l'aide de la iteratee dans la liste. |
| 16 | _.shuffle(list) Il renvoie la copie aléatoire de la liste. |
| 17 | _.toArray(list) Il définit un tableau de la liste. |
| 18 | _.size(list) Il définit le nombre de valeurs dans la liste. |
| 19 | _.first(array, [n]) Il spécifie le premier élément du tableau dans la liste. |
| 20 | _.initial(array, [n]) Il renvoie tout, mais spécifie la dernière entrée du tableau dans la liste. |
| 21 | _.last(array, [n]) Il spécifie le dernier élément du tableau dans la liste. |
| 22 | _.rest(array, [index]) Il définit les éléments restants du tableau. |
| 23 | _.without(array, *values) Il renvoie les valeurs de toutes les instances qui sont supprimées de la liste. |
| 24 | _.indexOf(array, value, [isSorted]) Il renvoie la valeur si elle est trouvée à un index spécifié ou renvoie -1, si elle n'est pas trouvée. |
| 25 | _.indexOf(array, value, [fromIndex]) Il renvoie la dernière occurrence de la valeur dans le tableau ou renvoie -1, si elle n'est pas trouvée. |
| 26 | _.isEmpty(object) Il renvoie true s'il n'y a pas de valeurs dans la liste. |
| 27 | _.chain(obj) Il renvoie un objet enveloppé. |
Le routeur est utilisé pour acheminer les applications côté client et définit la représentation URL de l'objet de l'application. Un routeur est requis lorsque les applications Web fournissent des URL pouvant être liées, mises en signet et partageables pour des emplacements importants dans l'application.
Le tableau suivant répertorie les méthodes qui peuvent être utilisées pour manipuler le BackboneJS - Router -
| S.No. | Méthodes et description |
|---|---|
| 1 | étendre Il étend la classe de routeur du backbone. |
| 2 | itinéraires Il définit la représentation URL des objets d'application. |
| 3 | initialiser Il crée un nouveau constructeur pour l'instanciation du routeur. |
| 4 | route Il crée une route pour le routeur. |
| 5 | naviguer Il est utilisé pour mettre à jour l'URL dans les applications. |
| 6 | exécuter Il est utilisé lorsqu'une route correspond à son rappel correspondant. |
Il garde une trace de l'historique, correspond à la route appropriée, déclenche des rappels pour gérer les événements et active le routage dans l'application.
début
C'est la seule méthode qui peut être utilisée pour manipuler le BackboneJS-History. Il commence à écouter les itinéraires et gère l'historique des URL à ajouter aux favoris.
Syntaxe
Backbone.history.start(options)Paramètres
options - Les options incluent les paramètres tels que pushState et hashChange utilisé avec l'histoire.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>History Example</title>
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type = "text/javascript"></script>
</head>
<script type = "text/javascript">
//'Router' is a name of the router class
var Router = Backbone.Router.extend ({
//The 'routes' maps URLs with parameters to functions on your router
routes: {
"myroute" : "myFunc"
},
//'The function 'myFunc' defines the links for the route on the browser
myFunc: function (myroute) {
document.write(myroute);
}
});
//'router' is an instance of the Router
var router = new Router();
//Start listening to the routes and manages the history for bookmarkable URL's
Backbone.history.start();
</script>
<body>
<a href = "#route1">Route1 </a>
<a href = "#route2">Route2 </a>
<a href = "#route3">Route3 </a>
</body>
</html>Production
Exécutons les étapes suivantes pour voir comment le code ci-dessus fonctionne -
Enregistrez le code ci-dessus dans le start.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
NOTE- La fonctionnalité ci-dessus est liée à la barre d'adresse. Ainsi, lorsque vous ouvrez le code ci-dessus dans le navigateur, il affichera le résultat comme suit.
Cliquez ici pour la démo
Il est utilisé pour conserver l'état du modèle sur le serveur.
Le tableau suivant répertorie les méthodes qui peuvent être utilisées pour manipuler le BackboneJS-Sync -
| S.No. | Méthodes et description |
|---|---|
| 1 | Backbone.sync Il conserve l'état du modèle sur le serveur. |
| 2 | Backbone.ajax Il définit la fonction ajax personnalisée. |
| 3 | Backbone.emulateHTTP Si votre serveur Web ne prend pas en charge l'approche REST ou HTTP, activez Backbone.emulateHTTP. |
| 4 | Backbone.emulateJSON Il permet de gérer les requêtes encodées avec application/json en définissant la méthode sur true. |
Les vues sont utilisées pour refléter «à quoi ressemble votre modèle de données». Ils représentent les données du modèle pour l'utilisateur. Ils fournissent l'idée derrière la présentation des données du modèle à l'utilisateur. Il gère les événements d'entrée de l'utilisateur, lie les événements et les méthodes, rend le modèle ou la collection et interagit avec l'utilisateur.
Le tableau suivant répertorie les méthodes qui peuvent être utilisées pour manipuler le BackboneJS-Views.
| S.No. | Méthodes et description |
|---|---|
| 1 | étendre Il étend le Backbone.View classe pour créer une classe de vue personnalisée. |
| 2 | initialiser Il instancie la vue en utilisant le nouveau mot-clé. |
| 3 | el Il définit l'élément à utiliser comme référence de vue. |
| 4 | $ el Il représente l'objet jQuery pour l'élément de la vue. |
| 5 | setElement Il spécifie l'élément DOM existant vers un élément DOM différent. |
| 6 | les attributs Ils peuvent être utilisés comme attributs d'élément DOM sur la classe de vue. |
| sept | $ (jQuery) Il est utilisé comme un sélecteur qui contient la fonction $ et exécute des requêtes dans l'élément de la vue. |
| 8 | modèle Lors du rendu de la vue, le modèle crée des copies réutilisables du balisage et permet d'accéder aux données d'instance. |
| 9 | rendre Il contient la logique de rendu d'un modèle. |
| dix | retirer Supprime une vue du DOM. |
| 11 | delegateEvents Lie les éléments aux éléments DOM spécifiés avec des méthodes de rappel pour gérer les événements. |
| 12 | undelegateEvents Il supprime les événements de délégué de la vue. |
La classe utilitaire définit un ensemble de méthodes utilisées pour implémenter l'utilitaire de base.
Le tableau suivant répertorie les méthodes que vous pouvez utiliser pour manipuler le BackboneJS-Utility -
| S.No. | Méthodes et description |
|---|---|
| 1 | Backbone.noConflict Il affiche la valeur d'origine de l'objet Backbone et permet de stocker la référence à un backbone. |
| 2 | Backbone. $ Il permet à Backbone d'utiliser un objet particulier comme bibliothèque DOM. |