Exemples pour expliquer la vue View dans le framework Backbone.js de JavaScript

La vue dans Backbone est utilisée pour refléter l'apparence du modèle dans votre application. Ils écoutent les événements et réagissent en conséquence.
Dans le didacticiel suivant, je ne vous expliquerai pas comment lier des modèles et des collections à des vues. Au lieu de cela, je me concentrerai sur la façon dont les vues utilisent les bibliothèques de modèles javascript, en particulier _.template d'Underscore.js.
Ici, nous utilisons jQuery pour manipuler les éléments du DOM. Bien sûr, vous pouvez également utiliser d'autres bibliothèques, comme MooTools ou Sizzle, mais la documentation officielle de Backbone nous recommande d'utiliser jQuery.
Ensuite, prenons le champ 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();

Copier après la connexion

Qu'il s'agisse d'un Modèle, d'une Vue ou d'une Collection, la méthode initialize() sera automatiquement déclenchée lors de son instanciation.

el attribut
L'attribut el fait référence à l'objet DOM qui a été créé dans le navigateur. Chaque vue a un attribut el. S'il n'est pas défini, Backbone créera un élément div vide comme attribut el.
Créons un attribut el pour View et définissons-le sur #search_containe.

<div id="search_container"></div>
<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      alert("Welcome to Backbone!");
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

Copier après la connexion

À l'heure actuelle, l'attribut el de View fait référence à l'élément div avec l'identifiant search_container. Nous avons maintenant lié cet élément div, donc tous les événements que nous souhaitons déclencher doivent se trouver dans cet élément div.

Charger le modèle
Backbone dépend fortement de Underscore.js, nous pouvons donc utiliser de petits modèles dans Underscore.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 l'attribut el de View via jQuery.

<script type="text/template" id="search_template">
 <label>Search</label>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      // 通过 Underscore 编译生成模板
      var template = _.template( $("#search_template").html(), {} );
      //讲生成的模板加载到 el 属性中
      this.$el.html( template );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

Copier après la connexion

Ajouter un événement d'écoute
Nous utilisons l'attribut events de View pour ajouter des événements d'écoute. N'oubliez pas que les événements d'écoute ne peuvent être ajoutés qu'aux éléments enfants de l'attribut 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>
 <input type="text" id="search_input" />
 <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
  SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      var template = _.template( $("#search_template").html(), {} );
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch"
    },
    doSearch: function( event ){
      // 当 button 被点击时触发 alert 
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

Copier après la connexion

Passer les paramètres au modèle
Le modèle peut utiliser les paramètres transmis depuis View sous la forme <%= %>.

<script type="text/template" id="search_template">
  <!-- 通过 <%= %> 形式使用传来的参数 -->
  <label><%= search_label %></label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
   SearchView = Backbone.View.extend({
    initialize: function(){
      this.render();
    },
    render: function(){
      //定义需要传递的参数
      var variables = { search_label: "My Search" };
      // 通过 Underscore 生成模板，同时传递参数
      var template = _.template( $("#search_template").html(), variables );
      // Load the compiled HTML into the Backbone "el"
      this.$el.html( template );
    },
    events: {
      "click input[type=button]": "doSearch" 
    },
    doSearch: function( event ){
      alert( "Search for " + $("#search_input").val() );
    }
  });

  var search_view = new SearchView({ el: $("#search_container") });
</script>

Copier après la connexion

Gestion des événements DOM
Une fonctionnalité très importante des vues est de nous aider à lier automatiquement les événements d'interface. Vous souvenez-vous de la façon dont nous liions auparavant les événements aux étiquettes d'interface ? Cela pourrait ressembler à ceci :

<p> 
  <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"> 
  function createData() { 
    // todo 
  } 
  function readData() { 
    // todo 
  } 
  function updateData() { 
    // todo 
  } 
  function deleteData() { 
    // todo 
  } 
 
  $('#create').on('click', createData); 
  $('#read').on('click', readData); 
  $('#update').on('click', updateData); 
  $('#delete').on('click', deleteData); 
</script>

Copier après la connexion

Il s'agit d'un exemple typique de liaison d'événements DOM via jQuery. Si vous développez ou avez développé des applications complexes, vous avez peut-être essayé de mieux organiser ces codes d'une manière ou d'une autre pour les rendre plus claires et plus faciles à maintenir.
L'objet view de Backbone nous fournit un mécanisme de liaison automatique pour les événements afin de mieux maintenir la relation entre le 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 : { 
      'click #create' : 'createData', 
      'click #read' : 'readData', 
      'click #update' : 'updateData', 
      'click #delete' : 'deleteData' 
    }, 
    createData : function() { 
      // todo 
    }, 
    readData : function() { 
      // todo 
    }, 
    updateData : function() { 
      // todo 
    }, 
    deleteData : function() { 
      // todo 
    } 
  }); 
  var view = new MyView(); 
</script>

Copier après la connexion

Dans cet exemple, nous avons placé quatre boutons dans une étiquette avec l'identifiant de la vue et associé cette étiquette à la classe de vue MyView.
Lors de la définition de la classe de vue, nous avons déclaré un attribut events, qui représente la liste des événements utilisateur dans la vue, décrit comme suit :

事件名称 选择器 : 事件处理函数

Copier après la connexion

Le nom de l'événement peut être n'importe quel événement pris en charge par l'objet DOM, le sélecteur peut être n'importe quelle chaîne de sélection prise en charge par jQuery ou Zepto (y compris le sélecteur d'étiquette, le sélecteur de classe, le sélecteur d'identifiant, etc.), et la fonction de gestion d'événement doit avoir été définie dans Le nom de la méthode de la classe de vue elle-même.
L'objet view analyse automatiquement la description dans la liste des événements, c'est-à-dire qu'il utilise jQuery ou Zepto pour obtenir l'objet DOM décrit par le sélecteur et lie la fonction de gestionnaire d'événements au nom de l'événement. Ces opérations seront terminées automatiquement lorsque la classe de vue sera instanciée. Nous pouvons nous soucier davantage de la structure de la classe de vue elle-même au lieu de réfléchir délibérément à la manière de lier les événements.

Möglicherweise beschäftigt Sie eine andere Frage: Wenn die DOM-Struktur der Ansicht dynamisch generiert wird, stellt Backbone dann entsprechende Methoden zum dynamischen Binden und Entbinden von Ereignissen bereit?
Tatsächlich müssen Sie sich über dieses Problem keine Sorgen machen, da die Ereignisse in Ereignissen über die Methode „delegate()“ an das el-Element des Ansichtsobjekts und nicht an das vom Selektor beschriebene Element gebunden sind. Unabhängig davon, wie sich die Struktur innerhalb der Ansicht ändert, sind die Ereignisse in Ereignissen daher gültig.
(Wenn Sie mit jQuery vertraut sind, kennen Sie möglicherweise die von ihm bereitgestellte Methode „delegate()“. Diese Methode bindet das Ereignis tatsächlich an das übergeordnete Element und löst dann das Ereignis aus, indem sie das untergeordnete Zielelement während des Ereignis-Bubbling-Prozesses überprüft.)
Das Ansichtsobjekt bindet Ereignisse über die Methode „delegate()“, was bedeutet, dass wir uns nicht um die Auswirkungen von Änderungen in der Ansichtsstruktur auf Ereignisse kümmern müssen. Es bedeutet auch, dass das dem Selektor in Ereignissen entsprechende Element innerhalb der el-Methode liegen muss Element der Ansicht, andernfalls kann das gebundene Ereignis nicht wirksam werden.

Dennoch müssen wir in einigen Fällen Ereignisse manuell binden und entbinden. Das Ansichtsobjekt stellt die Methoden „delegateEvents()“ und „undelegateEvents()“ zum dynamischen Binden und Entbinden der Ereignisliste bereit. Sie können dazu die API-Dokumentation überprüfen. Erfahren Sie mehr über sie.
Ansichten und Daten rendern
Ansichten werden hauptsächlich für die Bindung von Schnittstellenereignissen und das Rendern von Daten verwendet. Das Ansichtsobjekt stellt jedoch nur eine Methode für das Rendern bereit, und es handelt sich um eine leere Methode ohne jegliche Logik, auf die nirgendwo verwiesen werden muss es, um unsere eigene Rendering-Logik zu implementieren.
Ansichten können viel Schnittstellenlogik enthalten. Es wird empfohlen, dass alle Ansichtsunterklassen die render()-Methode überladen und sie als Eingabemethode für das endgültige Rendern verwenden. Bei der Teamentwicklung kann das strikte Programmieren nach Spezifikationen dazu beitragen, dass andere Ihren Code besser verstehen und pflegen.

Exemples pour expliquer la vue View dans le framework Backbone.js de JavaScript_Basic Knowledge