La vue de l'épine dorsale est utilisée pour refléter l'apparence du modèle dans votre application. Ils écoutent des événements et réagissent en conséquence.
Dans le prochain tutoriel, je ne vous dirai pas comment lier le modèle et la collection à afficher, mais je discuterai principalement de la façon dont View utilise les bibliothèques de modèles JavaScript, en particulier les bibliothèques de sous-ore.
Ici, nous utilisons jQuery pour manipuler les éléments DOM. Bien sûr, vous pouvez également utiliser d'autres bibliothèques, telles que Mootools ou Sizzle, mais la documentation officielle de l'épine dorsale recommande d'utiliser jQuery.
Ensuite, nous utilisons la zone de recherche comme exemple pour créer une nouvelle vue:
SearchView = Backbone.View.Extend ({initialize: function () {alert ("Welcome to Backbone!");}}); Var search_view = new searchView ();Qu'il s'agisse d'un modèle, d'une vue ou d'une collection, la méthode Initialize () sera automatiquement tirée lorsqu'elle est instanciée.
attribut el
L'attribut EL fait référence à un objet DOM qui a été créé dans le navigateur. Chaque vue a un attribut EL. S'il n'est pas défini, l'épine dorsale créera un élément DIV vide comme l'attribut EL.
Créons une propriété EL pour la vue et définissons-la sur #Search_Containe.
<div id = "search_container"> </ div> <script type = "text / javaScript"> searchView = backbone.view.extend ({initialize: function () {alert ("bienvenue sur dorsalbone!");}}); var search_view = new searchView ({el: $ ("# search_continer")}); </cript>À l'heure actuelle, l'attribut el de la vue fait référence à l'élément div dont l'ID est Search_Container. Nous sommes liés à cet élément div pour le moment, donc tout événement que nous voulons déclencher doit être dans cet élément div.
Modèles de chargement
La squelette dépend fortement de souligner.js, nous pouvons donc utiliser de petits modèles dans soulignement.js.
Maintenant, ajoutons une méthode render () et appelons-la dans initialize () afin que la méthode render () soit automatiquement déclenchée lorsque la vue est initialisée.
Cette méthode render () chargera le modèle dans la propriété EL de la vue via jQuery.
<script type = "text / template" id = "search_template"> <label> search </ label> <entrée type = "text" id = "search_input" /> <input type = "Button" id = "search_button" value = "search" /> </ script> <div id = "search_container"> </ div> <script type = "text / javascript" Initialize: Function () {this.Render ();}, rendu: fonction () {// via le modèle de compilation et de génération var search_view = new searchView ({el: $ ("# search_continer")}); </cript>Ajouter des événements d'écoute
Nous utilisons la propriété des événements de la vue pour ajouter des événements d'écoute, en nous rappelant que les événements d'écoute ne peuvent être ajoutés qu'aux éléments enfants de la propriété EL. Maintenant, ajoutons un événement d'écoute au bouton de l'élément enfant.
<script type = "text / template" id = "search_template"> <label> search </ label> <entrée type = "text" id = "search_input" /> <input type = "Button" id = "search_button" value = "search" /> </ script> <div id = "search_container"> </ div> <script type = "text / javascript" Initialize: function () {this.render ();}, render: function () {var template = _.Template ("# search_template"). html (), {}); Cliquez sur, alert alerte ("Rechercher" + $ ("# search_input"). Val ());}}); var search_view = new searchView ({el: $ ("# search_continer")}); </cript>Passer les paramètres au modèle
Le modèle peut utiliser les paramètres passés de la vue sous la forme de <% =%>.
<script type = "text / template" id = "search_template"> <! - Utilisez les paramètres passés via <% =%> -> <label> <% = search_label%> </ label> <input type = "text" id = "search_input" /> <entrée type = "Button" id = "search_button" value " type = "text / javascript"> searchView = dackbone.view.Extend ({initialize: function () {this.render ();}, render: function () {// définir les paramètres qui doivent être transmis variables var = {search_label: "ma recherche"}; // générer des templates par sous-ore $ (# search_template "). html (), variables); }); var search_view = new searchView ({el: $ ("# search_continer")}); </cript>Gérer les événements DOM
Une caractéristique très importante de la vue consiste à nous aider à lier automatiquement les événements d'interface. Rappelez-vous comment nous avons l'habitude de lier les événements aux balises d'interface? C'est peut-être comme ça:
<p> <input type = "bouton" value = "create" id = "create" /> <input type = "bouton" value = "read" id = "read" /> <input type = "button" value = "update" id = "update" /> <input type = "bouton" value = "delete" id = "delete" /> </ p> <script type = "text / javascript"> function créatedata () {// TODE = " ReadData () {// TODO} fonction UpdateData () {// TODO} fonction DeleteData () {// TODO} fonction DeleteData () {// toDo} $ ('# create'). on ('click', créationData); $ ('# read'). sur ('click', readdata); $ ('# update'). sur ('click', updatedata); $ ('# delete'). sur ('click', supprimé); </cript>Il s'agit d'un exemple typique d'événements DOM de liaison via jQuery. Si vous développez ou avez développé une application complexe, vous avez peut-être essayé d'organiser ces codes mieux d'une manière ou d'une autre afin qu'ils soient plus structurés et plus faciles à entretenir.
L'objet View de Backbone nous fournit un mécanisme de liaison automatique pour les événements afin de mieux maintenir la relation entre DOM et les événements. Jetons un coup d'œil à l'exemple suivant:
<p id = "View"> <input type = "Button" value = "create" id = "create" /> <input type = "Button" value = "read" id = "read" /> <input type = "Button" value = "update" id = "update" /> <input type = "Button" value = "delete" id = "delete" /> </ p> <script type = "text / javascript"> var myview = Backbone.View.Extend ({el: '#View', Events: {'cliquez #create': 'CreateData', 'cliquez sur #Read': 'ReadData', 'Click #update': 'updatedata', 'clique UpdateData: function () {// todo}, deletedata: function () {// todo}, deletedata: function () {// todo}}); var View = new MyView (); </cript>Dans cet exemple, nous mettons 4 boutons dans une balise avec ID View et associons cette balise avec la classe View MyView.
Lors de la définition de la classe de vue, nous déclarons une propriété d'événements, qui représente la liste des événements utilisateur dans la vue, et est décrit comme suit:
Nom de l'événement Sélecteur: fonction de gestionnaire d'événementsLe nom de l'événement peut être tout événement pris en charge par l'objet DOM, le sélecteur peut être n'importe quelle chaîne de sélecteur prise en charge par jQuery ou Zepto (y compris le sélecteur d'étiquette, le sélecteur de classe, le sélecteur d'identification, etc.), et le gestionnaire d'événements doit être le nom de la méthode qui a été défini dans la classe de vue elle-même.
L'objet View analyse automatiquement la description dans la liste des événements, c'est-à-dire utiliser jQuery ou Zepto pour obtenir l'objet DOM décrit par le sélecteur et lie la fonction du gestionnaire d'événements au nom de l'événement. Ces opérations seront automatiquement terminées lorsque la classe de vue sera instanciée. Nous pouvons nous soucier davantage de la structure de la classe de vue elle-même, plutôt que de considérer délibérément comment lier les événements.
Un autre problème qui vous inquiète peut-être: si la structure DOM de la vue est générée dynamiquement, la squelette fournit-elle des méthodes correspondantes pour la liaison dynamique et les événements désinstallés?
En fait, vous n'avez pas à vous soucier de ce problème, car les événements des événements sont liés à l'élément EL de l'objet de vue via la méthode Delegate (), plutôt que l'élément décrit par le sélecteur. Par conséquent, peu importe comment la structure dans la vue change, les événements des événements sont valides.
(Si vous connaissez JQuery, vous pouvez comprendre la méthode Delegate () qu'il fournit. Cette méthode lie en fait l'événement à l'élément de couche parent, puis déclenche l'événement en vérifiant l'élément enfant cible pendant la bulle d'événement.)
L'objet de vue lie les événements via la méthode Delegate (), ce qui signifie que nous n'avons pas besoin de nous soucier de l'impact des changements de structure de vue sur les événements. Cela signifie également que l'élément correspondant au sélecteur dans les événements doit être dans l'élément EL de la vue, sinon les événements liés ne prendront pas effet.
Néanmoins, il y a des cas où nous pouvons encore avoir besoin de se lier manuellement et les méthodes UndegateEvents () et UnlegateEvents () sont utilisées pour se lier dynamiquement et UndegateEvents (), que vous pouvez apprendre en examinant la documentation de l'API.
Rendre les vues et les données
Les vues sont principalement utilisées pour la liaison des événements d'interface et le rendu des données. Cependant, l'objet View fournit uniquement une méthode render () liée à Render (), et c'est une méthode vide sans aucune logique et aucune référence à n'importe où. Nous devons le surcharger pour implémenter notre propre logique de rendu.
La vue peut contenir beaucoup de logique d'interface. Il est recommandé de voir toutes les sous-classes surcharger la méthode Render () et l'utiliser comme méthode d'entrée pour le rendu final. Dans le développement d'équipe, le codage strictement conformément aux spécifications peut aider les autres à mieux comprendre et maintenir votre code.