Table des matières
Backbone.js Il est basé sur la structure MVC, en plus d'avoir Des modèles, a aussi vuesSelon la philosophie de cette architecture de construction logicielle, les vues sont celles qui ont la responsabilité de montrer à l'utilisateur les données qui sont générées entre le contrôleur et le modèle en fonction de la demande qui a été faite.Dans Backbone.js cela fonctionne un peu différemment, la vue ne contient pas d'éléments que l'utilisateur voit directement, mais communique plutôt les données via un moteur de modèle.
Les vues dans Backbone.js
Dans Backbone.js les vues en tant que telles ne contiennent pas de langage HTML pouvant être montré à l'utilisateur de notre application, au contraire elles contiennent la logique qui nous permettra de construire le fonctionnement de la partie avant de l'application que nous développons en utilisant le modèle comme une base, c'est-à-dire ce que nous avons dans le modèle, nous allons le manipuler dans la vue ayant ainsi deux niveaux d'action.
Pour afficher les données, nous utiliserons le méthode render() qui nous permet de transmettre les données de notre vue à un modèle, ledit modèle est construit dans un moteur de modèles Javascript comme par exemple: Soulignement, Moustache, Jquery-tpml, etc..
Voir la création
À créer une vue Nous suivons un processus assez direct et similaire à la création d'un modèle, pour générer la vue dont nous n'avons qu'à étendre Backbone.Voir, voyons comment cela se comporte lorsque nous l'exécutons sur notre console chromée en utilisant un fichier HTML avec les bibliothèques de Backbone.js, jsquery Oui souligner déjà chargé.
Voyons d'abord le code que nous allons placer dans notre console :
var TodoView = Backbone.View.extend ({tagName: 'li', // Cache la fonction de modèle pour un seul élément. todoTpl: _.template ("Un exemple de modèle"), événements : {'dblclick label ':' edit ',' keypress .edit ':' updateOnEnter ',' blur .edit ':' close '}, // Régénérer les légendes de l'étiquette de l'élément. render: function () {this. $ el.html (this.todoTpl ( this.model.toJSON ())); this.input = this. $ ('. edit'); return this;}, edit: function () {// Il est exécuté une fois terminé double-cliquez sur la balise}, fermez : function () {// il est exécuté lorsque le focus est retiré de l'élément}, updateOnEnter: function (e) {// il est exécuté lorsqu'une touche est enfoncée en mode édition, // cependant, attendez que enter soit enfoncé pour entrer en action}});
Comme nous pouvons le voir, après avoir fait le se déployer correspondant, nous initialisons un certain nombre d'attributs qui feront fonctionner notre vue, de plus dans chaque élément, nous plaçons les commentaires afin que nous sachions comment cela fonctionne.
Voyons maintenant dans la console ce qui se passe lorsque nous appelons la vue :
ImportantLors de l'appel élément le dans le console.log() ce que nous avons fait à l'objet que nous instancions de notre point de vue, ce que nous faisons est d'imprimer le élément DOM correspondant, de cette façon est que nos vues peuvent composer leurs éléments et ainsi s'insérer à la fois dans le arbre DOM du document modèle.
Avec cela, nous concluons ce tutoriel avec lequel nous avons déjà fait un pas en avant dans ce qui correspond à la génération de vues dans une application MVC en utilisant Backbone.js.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif