Beispiele zur Erläuterung der View-Ansicht im Backbone.js-Framework von JavaScript_Grundkenntnisse

Die Ansicht im Backbone wird verwendet, um das Erscheinungsbild des Modells in Ihrer App widerzuspiegeln. Sie achten auf Ereignisse und reagieren entsprechend.
Im folgenden Tutorial werde ich Ihnen nicht erklären, wie Sie Modelle und Sammlungen an Ansichten binden, sondern mich darauf konzentrieren, wie Ansichten Javascript-Vorlagenbibliotheken verwenden, insbesondere _.template von Underscore.js.
Hier verwenden wir jQuery, um DOM-Elemente zu bearbeiten. Natürlich können Sie auch andere Bibliotheken wie MooTools oder Sizzle verwenden, aber die offizielle Dokumentation von Backbone empfiehlt die Verwendung von jQuery.
Nehmen wir als Nächstes das Suchfeld als Beispiel, um eine neue Ansicht zu erstellen:

SearchView = Backbone.View.extend({
  initialize: function(){
    alert("Welcome to Backbone!");
  }
});
var search_view = new SearchView();

Unabhängig davon, ob es sich um ein Modell, eine Ansicht oder eine Sammlung handelt, wird die Methode initialize() automatisch ausgelöst, wenn sie instanziiert wird.

el-Attribut
Das el-Attribut bezieht sich auf das DOM-Objekt, das im Browser erstellt wurde. Jede Ansicht verfügt über ein el-Attribut. Wenn es nicht definiert ist, erstellt Backbone ein leeres div-Element als el-Attribut.
Erstellen wir ein el-Attribut für View und setzen es auf #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>

Zu diesem Zeitpunkt bezieht sich das el-Attribut von View auf das div-Element mit der ID von search_container. Wir haben dieses div-Element nun gebunden, daher müssen sich alle Ereignisse, die wir auslösen möchten, in diesem div-Element befinden.

Vorlage laden
Backbone ist stark von Underscore.js abhängig, daher können wir kleine Vorlagen in Underscore.js verwenden.
Fügen wir nun eine render()-Methode hinzu und rufen sie in initialize() auf, sodass die render()-Methode automatisch ausgelöst wird, wenn die Ansicht initialisiert wird.
Diese render()-Methode lädt die Vorlage über jQuery in das el-Attribut der Ansicht.

<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>

Hörereignis hinzufügen
Wir verwenden das Ereignisattribut von View, um Abhörereignisse hinzuzufügen. Denken Sie daran, dass Abhörereignisse nur zu untergeordneten Elementen des el-Attributs hinzugefügt werden können. Fügen wir nun ein Listener-Ereignis zur Schaltfläche des untergeordneten Elements hinzu.

<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>

Parameter an die Vorlage übergeben
Vorlage kann Parameter verwenden, die von View in der Form 332000003288cabbdff89f9a8e5a919b übergeben werden.

<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>

Verarbeitung von DOM-Ereignissen
Eine sehr wichtige Funktion von Ansichten besteht darin, uns dabei zu helfen, Schnittstellenereignisse automatisch zu binden. Erinnern Sie sich, wie wir zuvor Ereignisse an Schnittstellenbezeichnungen gebunden haben? Es könnte so aussehen:

<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> 

Dies ist ein typisches Beispiel für die Bindung von DOM-Ereignissen über jQuery. Wenn Sie komplexe Anwendungen entwickeln oder entwickelt haben, haben Sie möglicherweise versucht, diese Codes auf irgendeine Weise besser zu organisieren, um sie klarer und einfacher zu verwalten zu machen.
Das Ansichtsobjekt von Backbone bietet uns einen automatischen Bindungsmechanismus für Ereignisse, um die Beziehung zwischen DOM und Ereignissen besser aufrechtzuerhalten. Schauen wir uns das folgende Beispiel an:

<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> 

In diesem Beispiel haben wir vier Schaltflächen in ein Label mit der ID „view“ eingefügt und dieses Label mit der View-Klasse „MyView“ verknüpft.
Beim Definieren der Ansichtsklasse haben wir ein Ereignisattribut deklariert, das die Liste der Benutzerereignisse in der Ansicht darstellt und wie folgt beschrieben wird:

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

Der Ereignisname kann jedes vom DOM-Objekt unterstützte Ereignis sein, der Selektor kann jede von jQuery oder Zepto unterstützte Selektorzeichenfolge sein (einschließlich Label-Selektor, Klassen-Selektor, ID-Selektor usw.) und die Ereignisbehandlungsfunktion sollte in definiert sein Der Methodenname der Ansichtsklasse selbst.
Das Ansichtsobjekt analysiert automatisch die Beschreibung in der Ereignisliste, dh es verwendet jQuery oder Zepto, um das vom Selektor beschriebene DOM-Objekt abzurufen, und bindet die Ereignishandlerfunktion an den Ereignisnamen. Diese Vorgänge werden automatisch abgeschlossen, wenn die Ansichtsklasse instanziiert wird. Wir können uns mehr um die Struktur der Ansichtsklasse selbst kümmern, anstatt bewusst darüber nachzudenken, wie Ereignisse gebunden werden.

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. ​