Contoh untuk menerangkan paparan Lihat dalam rangka kerja Backbone.js pengetahuan JavaScript

Pandangan dalam Tulang Belakang digunakan untuk mencerminkan penampilan Model dalam apl anda. Mereka mendengar peristiwa dan bertindak balas dengan sewajarnya.
Dalam tutorial berikut, saya tidak akan memberitahu anda cara untuk mengikat Model dan Koleksi kepada Paparan Sebaliknya, saya akan menumpukan pada cara Views menggunakan perpustakaan templat javascript, terutamanya _.template Underscore.js.
Di sini kami menggunakan jQuery untuk memanipulasi elemen DOM Sudah tentu, anda juga boleh menggunakan perpustakaan lain, seperti MooTools atau Sizzle, tetapi dokumentasi rasmi Backbone mengesyorkan kami menggunakan jQuery.
Seterusnya, mari kita ambil kotak carian sebagai contoh untuk mencipta Paparan baharu:

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

Salin selepas log masuk

Sama ada Model, Paparan atau Koleksi, kaedah initialize() akan dicetuskan secara automatik apabila ia dimulakan.

sifat el
Atribut el merujuk kepada objek DOM yang telah dibuat dalam penyemak imbas Setiap View mempunyai atribut el Jika ia tidak ditakrifkan, Backbone akan mencipta elemen div kosong sebagai atribut el.
Mari buat atribut el untuk View dan tetapkan kepada #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>

Salin selepas log masuk

Pada masa ini, atribut el View merujuk kepada elemen div dengan id search_container. Kami kini telah mengikat elemen div ini, jadi sebarang peristiwa yang ingin kami cetuskan mestilah dalam elemen div ini.

Muat templat
Backbone sangat bergantung pada Underscore.js, jadi kami boleh menggunakan templat kecil dalam Underscore.js.
Sekarang, mari tambahkan kaedah render() dan panggilnya dalam initialize() supaya kaedah render() dicetuskan secara automatik apabila View dimulakan.
Kaedah render() ini akan memuatkan templat ke dalam atribut el View through 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>

Salin selepas log masuk

Tambah acara mendengar
Kami menggunakan atribut peristiwa View untuk menambah acara mendengar Ingat bahawa peristiwa mendengar hanya boleh ditambahkan pada elemen anak atribut el. Sekarang, mari tambahkan acara pendengar pada butang elemen kanak-kanak.

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

Salin selepas log masuk

Lepaskan parameter kepada templat
Templat boleh menggunakan parameter yang diluluskan daripada View dalam bentuk <%= %>.

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

Salin selepas log masuk

Mengendalikan acara DOM
Ciri paparan yang sangat penting adalah untuk membantu kami mengikat acara antara muka secara automatik. Ingat kembali bagaimana kami mengikat peristiwa pada label antara muka sebelum ini? Ia mungkin kelihatan seperti ini:

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

Salin selepas log masuk

Ini adalah contoh tipikal peristiwa DOM yang mengikat melalui jQuery Jika anda sedang membangun atau telah membangunkan beberapa aplikasi yang kompleks, anda mungkin telah cuba menyusun kod ini dengan lebih baik dalam beberapa cara untuk menjadikannya Struktur kelihatan lebih jelas dan lebih mudah untuk diselenggara.
Objek pandangan Backbone memberikan kita mekanisme pengikatan automatik untuk acara untuk mengekalkan hubungan antara DOM dan acara dengan lebih baik Mari kita lihat contoh berikut:

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

Salin selepas log masuk

Dalam contoh ini, kami meletakkan empat butang dalam label dengan id paparan dan mengaitkan label ini dengan kelas paparan MyView.
Apabila mentakrifkan kelas paparan, kami mengisytiharkan atribut peristiwa, yang mewakili senarai peristiwa pengguna dalam paparan, diterangkan seperti berikut:

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

Salin selepas log masuk

Nama acara boleh menjadi sebarang acara yang disokong oleh objek DOM, pemilih boleh menjadi sebarang rentetan pemilih yang disokong oleh jQuery atau Zepto (termasuk pemilih label, pemilih kelas, pemilih id, dll.), dan fungsi pengendalian acara sepatutnya ditakrifkan dalam Nama kaedah kelas pandangan itu sendiri.
Objek pandangan secara automatik menghuraikan perihalan dalam senarai acara, iaitu, menggunakan jQuery atau Zepto untuk mendapatkan objek DOM yang diterangkan oleh pemilih, dan mengikat fungsi pengendali acara kepada nama acara. Operasi ini akan dilengkapkan secara automatik apabila kelas paparan dijadikan instantiated.

Möglicherweise beschäftigt Sie eine andere Frage: Wenn die DOM-Struktur der Ansicht dynamisch generiert wird, stellt Backbone 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.

Trotzdem müssen wir in einigen Fällen möglicherweise immer noch Ereignisse manuell binden und entbinden. Das Ansichtsobjekt stellt die Methoden „delegateEvents()“ und „undelegateEvents()“ zum dynamischen Binden und Entbinden der Ereignisliste bereit. Sie können dies in der 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.

Contoh untuk menerangkan paparan Lihat dalam rangka kerja Backbone.js pengetahuan JavaScript_Basic