Tampilan di tulang punggung digunakan untuk mencerminkan penampilan model di aplikasi Anda. Mereka mendengarkan acara dan meresponsnya.
Dalam tutorial berikutnya, saya tidak akan memberi tahu Anda cara mengikat model dan koleksi untuk dilihat, tetapi terutama akan membahas bagaimana tampilan menggunakan pustaka Template JavaScript, terutama underscore.js's _.template.
Di sini kami menggunakan jQuery untuk memanipulasi elemen DOM. Tentu saja, Anda juga dapat menggunakan perpustakaan lain, seperti mootools atau mendesis, tetapi dokumentasi resmi Backbone merekomendasikan agar kami menggunakan jQuery.
Selanjutnya, kami menggunakan kotak pencarian sebagai contoh untuk membuat tampilan baru:
SearchView = backbone.view.extend ({initialize: function () {alert ("Selamat datang ke backbone!");}}); Var search_view = new SearchView ();Apakah itu model, tampilan atau koleksi, metode initialize () akan dipecat secara otomatis saat dipakai.
ATTRIBUT EL
Atribut EL mengacu pada objek DOM yang telah dibuat di browser. Setiap tampilan memiliki atribut EL. Jika tidak ditentukan, Backbone akan membuat elemen Div kosong sebagai atribut EL.
Mari kita buat properti EL untuk tampilan dan atur ke #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>Pada saat ini, atribut EL dari tampilan mengacu pada elemen div yang IDnya search_container. Kami terikat pada elemen div ini saat ini, jadi peristiwa apa pun yang ingin kami picu harus dalam elemen div ini.
Memuat template
Backbone sangat tergantung pada underscore.js, jadi kita dapat menggunakan templat kecil di underscore.js.
Sekarang, mari kita tambahkan metode render () dan panggil di inisialisasi () sehingga metode render () akan secara otomatis dipicu ketika tampilan diinisialisasi.
Metode render () ini akan memuat templat ke properti EL dari tampilan melalui jQuery.
<type skrip = "Teks/Templat" id = "search_template"> <label> pencarian </label> <input type = "text" id = "search_input"/> <input type = "tombol" id = "search_button" value = "search"/> </script> <v id = "search_container"> </div> script = "Jaskah =" TEXT = "Search_Container"> </Div> skrip = "TEXT =" TEXT = "Search_Container"> </Div> SCRIPE = "TEXT =" TEXT = "Search_Container"> </Div> SCRIPE = "TEXT =" TEXT = "Search_Container"> </Div> Script = "TEXT =" TEXT = "Search_Container"> </Div> Backbone.view.extend ({initialize: function () {this.render ();}, render: function () {// melalui compile underscore dan menghasilkan template var template = _.template ($ ("#search_template"). Html (), {}); / /the search_template "). Html (), {}); / /the search_template"). Html (), {}); templat ); } }); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Tambahkan acara mendengarkan
Kami menggunakan properti acara dari tampilan untuk menambahkan acara mendengarkan, mengingat bahwa acara mendengarkan hanya dapat ditambahkan ke elemen anak dari properti EL. Sekarang, mari tambahkan acara mendengarkan ke tombol elemen anak.
<type skrip = "Teks/Templat" id = "search_template"> <label> pencarian </label> <input type = "text" id = "search_input"/> <input type = "tombol" id = "search_button" value = "search"/> </script> <v id = "search_container"> </div> script = "Jaskah =" TEXT = "Search_Container"> </Div> skrip = "TEXT =" TEXT = "Search_Container"> </Div> SCRIPE = "TEXT =" TEXT = "Search_Container"> </Div> SCRIPE = "TEXT =" TEXT = "Search_Container"> </Div> Script = "TEXT =" TEXT = "Search_Container"> </Div> Backbone.view.extend ({initialize: function () {this.render ();}, render: function () {var template = _.template ($ ("#search_template"). Html (), {}); this. $ El.html (template);}, {{}); ini. DoSearch: Function (Event) {// Saat tombol diklik, Peringatan Peringatan ("Cari" + $ ("#Search_input"). Val ()); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Lulus parameter ke template
Template dapat menggunakan parameter yang ditularkan dari tampilan dalam bentuk < %= %>.
<Tipe skrip = "Teks/Templat" id = "search_template"> <!-Gunakan parameter yang diteruskan melalui < %= %>-> <label> < %= search_label %> </label> <input type = "text" id = "search_input"/> <input type = "tombol" id = "search_button" value = "value =" id = "search_container"> </div> <script type = "text/javascript"> searchView = backbone.view.extend ({{{{function) {this.render ();}, render: function () {// define parameter yang perlu disahkan var variaBles = {{{{{{{myLabel ("my. parameter var template = _.template ($ ("#search_template"). html (), variabel); $ ("#search_input"). Val ()); var search_view = new SearchView ({el: $ ("#search_container")}); </script>Menangani acara DOM
Fitur tampilan yang sangat penting adalah membantu kami secara otomatis mengikat acara antarmuka. Ingat bagaimana kami dulu mengikat acara untuk antarmuka tag? Mungkin 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} function deletedata () {// todo} $ ('#create'). on ('click', createdata); $ ('#baca'). On ('klik', readdata); $ ('#update'). on ('click', updateData); $ ('#delete'). on ('click', deletedata); </script>Ini adalah contoh khas dari mengikat peristiwa dom melalui jQuery. Jika Anda mengembangkan atau telah mengembangkan beberapa aplikasi yang kompleks, Anda mungkin telah mencoba mengatur kode -kode ini dengan lebih baik dalam beberapa cara sehingga mereka terlihat lebih terstruktur dan lebih mudah dipertahankan.
Objek View Backbone memberi kita mekanisme pengikatan otomatis untuk peristiwa untuk mempertahankan hubungan antara DOM dan peristiwa 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: {'klik #create': 'createData', 'klik #read': 'readdata', 'klik #update': 'updateData', 'klik #delete': 'deletedata'}, create updateData: function () {// TODO}, deletedata: function () {// TODO}, deletedata: function () {// TODO}}); var view = myview baru (); </script>Dalam contoh ini, kami memasukkan 4 tombol di tag dengan tampilan ID dan mengaitkan tag ini dengan kelas tampilan myView.
Saat mendefinisikan kelas tampilan, kami mendeklarasikan properti acara, yang mewakili daftar acara pengguna dalam tampilan, dan digambarkan sebagai berikut:
Pemilih Nama Acara: Fungsi Handler AcaraNama acara dapat berupa acara apa pun yang didukung oleh objek DOM, pemilih dapat berupa string pemilih yang didukung oleh jQuery atau Zepto (termasuk pemilih label, pemilih kelas, pemilih ID, dll.), Dan penangan acara harus menjadi nama metode yang telah didefinisikan dalam kelas tampilan itu sendiri.
Objek tampilan secara otomatis mem -parsing deskripsi dalam daftar acara, yaitu, gunakan jQuery atau Zepto untuk mendapatkan objek DOM yang dijelaskan oleh pemilih dan mengikat fungsi event handler ke nama acara. Operasi ini akan secara otomatis diselesaikan ketika kelas tampilan dipakai. Kita dapat lebih peduli tentang struktur kelas tampilan itu sendiri, daripada dengan sengaja mempertimbangkan cara mengikat peristiwa.
Masalah lain yang mungkin Anda khawatirkan: Jika struktur DOM tampilan dihasilkan secara dinamis, apakah tulang punggung memberikan metode yang sesuai untuk peristiwa pengikatan dan penghapusan penghapusan yang dinamis?
Sebenarnya, Anda tidak perlu khawatir tentang masalah ini, karena peristiwa dalam peristiwa terikat pada elemen EL dari objek tampilan melalui metode delegasi (), daripada elemen yang dijelaskan oleh pemilih. Oleh karena itu, tidak peduli bagaimana struktur dalam perubahan tampilan, peristiwa dalam peristiwa valid.
(Jika Anda terbiasa dengan jQuery, Anda mungkin memahami metode delegasi () yang disediakannya. Metode ini sebenarnya mengikat acara ke elemen lapisan induk, dan kemudian memicu acara dengan memeriksa elemen anak target selama gelembung acara.)
Objek tampilan mengikat peristiwa melalui metode delegasi (), yang berarti bahwa kita tidak perlu peduli dengan dampak perubahan struktur pandangan pada peristiwa. Ini juga berarti bahwa elemen yang sesuai dengan pemilih dalam peristiwa harus berada di dalam elemen EL dari tampilan, jika tidak, peristiwa terikat tidak akan berlaku.
Namun demikian, ada beberapa kasus di mana kita mungkin masih perlu mengikat secara manual dan tidak berpendar () dan metode undelegateEvents () digunakan untuk mengikat secara dinamis dan undelegateEvents (), yang dapat Anda pelajari dengan melihat dokumentasi API.
Memberikan tampilan dan data
Tampilan terutama digunakan untuk pengikatan acara antarmuka dan rendering data. Namun, objek tampilan hanya menyediakan metode render () yang terkait dengan render (), dan itu adalah metode kosong tanpa logika apa pun dan tidak ada referensi ke mana saja. Kita perlu berlebihan untuk mengimplementasikan logika rendering kita sendiri.
Tampilan mungkin berisi banyak logika antarmuka. Dianjurkan agar semua subkelas tampilan membebani metode render () dan menggunakannya sebagai metode entri untuk rendering akhir. Dalam pengembangan tim, pengkodean secara ketat sesuai dengan spesifikasi dapat membantu orang lain lebih memahami dan memelihara kode Anda.