Vues de dorsale et le DOM

Ce que vous allez créer

Vue d'ensemble

Les vues de réseau fournissent une convention et une abstraction utiles pour les interfaces utilisateur. Toutefois, pour inclure des fonctionnalités d'interface utilisateur dans votre application que Backbone, en tant que telle, n'a pas été conçues pour prendre en charge, vous devez vous pencher sur la manière d'intégrer efficacement des fonctionnalités personnalisées ou tierces à votre application Backbone. En conséquence, les développeurs doivent faire face aux défis et éviter les conflits complexes entre les bibliothèques externes et Backbone..

Introduction à Backbone.js

Backbone est un moyen fantastique d’organiser votre code côté client. Avec des abstractions telles que des modèles, des vues et des collections, Backbone aide les développeurs sérieux à écrire des applications bien organisées et évolutives.. 

Bien qu'il existe de nombreuses alternatives à Backbone, notamment Angular et Ember, Backbone offre aux développeurs une incroyable liberté pour écrire et organiser leur code de manière naturelle et confortable, sans se faire trop d’opinion sur ce à quoi ressemble le DOM (Document Object Model)..

Le maigre sur les vues de l'épine dorsale

Les vues sont l’un des composants les plus puissants et les plus flexibles de Backbone. Selon les auteurs de Backbone:

Les vues de backbone sont presque plus conventionnelles que codées - elles ne déterminent rien de votre code HTML ou CSS, et peuvent être utilisées avec n'importe quelle bibliothèque de templates JavaScript..

Ils sont habitués à manipuler ce que les utilisateurs voient dans leur navigateur et facilitent la communication avec les modèles. En conséquence, dans le paradigme de Model-View-Controller, il est utile de penser aux vues de backbone à la fois comme vue et comme contrôleur..

Cela a des implications sérieuses lors du développement d'applications avec une interaction utilisateur importante. En fait, il existe de nombreuses situations dans lesquelles vous pouvez utiliser une autre bibliothèque pour manipuler le DOM. La visualisation de données et les jeux sur le Web sont deux exemples dans lesquels vous pourriez préférer qu'une autre bibliothèque gère le rendu de vos vues face à l'utilisateur. Par conséquent, vous pouvez envisager d’utiliser jQuery, d3.js, crossfilter ou three.js pour certains de vos besoins de manipulation DOM..

Heureusement, il existe des moyens de faire en sorte que Backbone joue bien avec ces autres manipulateurs DOM.

Manipulation du modèle objet de document dans le backbone

Avant de commencer, passons en revue la manipulation du DOM dans Backbone. Commençons par un objet de vue de base.

var SomeView = Backbone.View.extend (// Des éléments de définition ici); var aView = new SomeView ();

Génial. Maintenant, disons à la vue comment se rendre en définissant un .rendre() méthode.

var SomeView = Backbone.View.extend (// définir le rendu d'un rendu: function () // obtenir du HTML var htmlContent = "
Ce type de HTML qui sera inséré dans le DOM
"; // insère le code HTML this. $ el.html (htmlContent); // renvoie une instance de l'objet à chaîner renvoie this;);

Il y a plusieurs choses qui se passent ici, alors allons-y pas à pas.

Définir un .rendre() Méthode

Tout d'abord, nous définissons un .rendre() méthode qui encapsule la logique nécessaire pour rendre HTML. Notez que Backbone est livré avec un .rendre() méthode hors de la boîte. Cependant, cela ne fait rien. Il a été conçu pour être écrasé avec une logique personnalisée!

Obtenir du contenu HTML

L'exemple ci-dessus suppose que vous obtenez du HTML quelque part. Vous pouvez utiliser des traits de soulignement _.modèle(). Alternativement, nous pouvons utiliser d’autres bibliothèques de modèles, comme Handlebars (mon préféré). Tout ce qui compte vraiment, c’est que nous obtenions du contenu HTML..

Putain, qu'est ce que el?

Nous avons besoin d'un endroit pour mettre le contenu HTML; c'est ce que el est pour. Comme .rendre(), el est un attribut fourni avec les vues dorsales prêtes à l'emploi. Il fait référence à l'élément HTML (et à tous ses enfants) contenu dans cette vue. Dans l'exemple ci-dessus, nous n'avons pas spécifié el. Par défaut, el est un div. Cependant, nous aurions pu facilement définir l’élément parent de la manière suivante:

var SomeView = Backbone.View.extend (el: "article",…); var aView = new SomeView (); console.log (aView.el); // un élément HTML "article" vide

Il y a aussi $ el, qui est juste el enveloppé dans jQuery. Nous verrons plus tard que $ el joue un rôle important dans la maîtrise des vues Backbone.

Retour ce…

Enfin, nous renvoyons une référence à l'objet lui-même pour permettre le chaînage. Bien que cela ne soit pas strictement requis, le retour ce est une convention. Sans pour autant retourner cette, nous aurions besoin d'un moyen d'accéder au contenu HTML de l'élément. Le code suivant illustre une solution alternative.

/ ** * Si render () ne renvoie rien, nous * accédons réellement à la propriété 'el' de indéfinie, qui n'existe pas *! * / aView.render (). el; // Devrait générer une erreur // Essayez d'accéder au fichier HTML console.log (aView.el); // Doit être vide (mais défini!) // ajouter du code HTML au DOM de 'aView' aView.render (); // Essayez d'accéder à nouveau au code HTML console.log (aView.el) // Devrait contenir le code HTML

Euh, rien n'est à l'écran!

Bon point. Même si nous avons appelé .rendre(), il n'y a rien sur l'écran-ce qui donne?

C'est parce que nous n'avons pas encore interagi avec le DOM. Tout ce que nous avons fait a été de générer du HTML et de le représenter dans un objet JavaScript appelé une vue. Puisque nous avons maintenant accès au code HTML généré, il ne nous reste plus qu'à ajouter ou insérer le code HTML dans le DOM de votre application Web..

Pour faire avancer les choses, nous allons également configurer une mini-application afin que la vue apparaisse au chargement de la page. Vous trouverez ci-dessous à quoi devraient ressembler votre code HTML et votre code JavaScript..

Configuration HTML de base

Voici ce qui se passe dans App.js

// Créer une vue var SomeView = Backbone.View.extend (initialize: function () , rendu: function () var someHTML = "
C'est du HTML
"; this. $ el.html (someHTML); return this;); // Créer un routeur var Router = Backbone.Router.extend (// définir vos routes: " ":" home ", home: function () var aView = new SomeView (); $ ('. app'). html (aView.render (). el);); // Instanciez votre routeur new Router (); // Début Historique de suivi Backbone.history.start ();

Allez sur votre serveur / navigateur local, chargez la page et votre application devrait être en cours d'exécution!

Utiliser Backbone et jQuery simultanément

La flexibilité de Backbone nous permet d’utiliser des bibliothèques tierces pour manipuler le DOM. Un scénario consiste à utiliser jQuery et Backbone simultanément pour manipuler vos vues. Ci-dessous un exemple mis à jour.

var SomeView = Backbone.View.extend (// Manipuler le DOM indirectement en créant du contenu HTML dans un rendu // Backbone View: function () var someHTML = "
Un peu de HTML
"; this. $ el.html (someHTML); return this;, // Manipuler le DOM directement depuis la vue du backbone renderWithJQuery: function () var otherHTML ="
Autre HTML
"; $ ('. app'). append (otherHTML); // peut ne pas avoir de sens pour renvoyer 'this', // une autre méthode de rendu, pour garder les choses intéressantes specialRender: function () this. $ ('. vide '). append ("N'est plus vide!"); return this;); // Plus tard dans votre application… // créer la vue var aView = new SomeView (); // modifier le DOM pour qu'il reflète la vue nouvellement créée $ ​​('. app'). html (aView.render (). el); // ajoute davantage de contenu directement au DOM à l'aide de jQuery dans // un objet de vue Backbone aView.renderWithJQuery ();

Le code ci-dessus entraînera deux paragraphes sur la page. Le premier paragraphe contient «Some HTML». Le deuxième paragraphe contient “Autre HTML”.

Pour tester votre compréhension de cela, inversez les appels de méthode comme suit:

// SomeView est déjà défini var aView = new SomeView (); aView.renderWithJQuery (); $ ('. app'). html (aView.render (). el);

Le code ci-dessus résultera en un paragraphe: «Some HTML». Dans les deux cas, il existe également un 

élément avec rien dedans. Nous en discuterons dans un instant.

Manipuler efficacement le DOM dans les vues de réseau de base

Comprendre la magie d’une manipulation (et d’une traversée) efficace du DOM nécessite de comprendre ceci. $ el et ceci. $ (). En utilisant ceci. $ el, nous limitons la manipulation du DOM au contenu de la vue. En utilisant ceci. $ (), nous sommes en train d'étendre la traversée du DOM à l'arborescence du DOM dans la vue.

En conséquence, dans le contexte de base, certaines utilisations de $ () (au lieu de ceci. $ ()) pourrait être inefficace. Par exemple, supposons que nous voulions parcourir le DOM pour trouver un élément. Nous pourrions utiliser n’importe laquelle des méthodes de traversée du DOM communes, y compris .trouver(), .enfants (), .le plus proche(), .premier(), etc.

Si nous savoir, a priori, que l'élément que nous recherchons se situe quelque part dans le DOM de la vue, nous devrions alors utiliser ceci. $ () pour éviter de chercher inutilement dans un plus grand arbre DOM. Si l'élément que nous recherchons se trouve en dehors du DOM de la vue, nous devrons alors utiliser $ ().

Par exemple, le .specialRender () méthode utilise la traversée du DOM localisée pour s'assurer que nous recherchons des éléments avec la classe vide dans le contexte de la vue. Si trouvé, il définit le contenu HTML de ces éléments pour inclure un envergure et le texte "N'est plus vide".

Conclusion

Dans cet article, nous avons examiné les vues Backbone, expliqué comment rendre les vues Backbone dans le DOM et exploré comment faire en sorte que Backbone fonctionne correctement avec d'autres bibliothèques que vous pourriez utiliser pour manipuler le DOM. Nous avons également découvert la traversée de DOM localisée et identifié des méthodes pour traverser efficacement et inefficacement le DOM..

La prochaine partie de cet article approfondira davantage avec des exemples plus compliqués pour faire en sorte que plusieurs bibliothèques travaillent ensemble dans la manipulation du DOM..