Tampilan Backbone dan DOM

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Ikhtisar

Tampilan backbone memberikan konvensi dan abstraksi yang berguna untuk pengguna interface. Namun, untuk menyertakan fungsionalitas UI di aplikasi anda , Backbone tidak dirancang untuk mendukungnya, anda harus mempertimbangkan cara mengintegrasikan fungsi khusus atau pihak ketiga secara efektif ke aplikasi Backbone anda. Akibatnya, pengembang harus menavigasi tantangan dan menghindari konflik yang rumit antara perpustakaan eksternal dan Backbone.

Perkenalan Backbone.js

Backbone adalah cara yang fantastis untuk mengatur kode sisi klien anda. Dengan abstraksi seperti model, tampilan, dan koleksi, Backbone membantu pengembang serius menulis aplikasi terorganisir dan terukur dengan baik.

Meskipun ada banyak alternatif untuk Backbone, termasuk Angular and Ember, Backbone memberi pengembang kebebasan yang luar biasa untuk menulis dan mengatur kode mereka dengan cara alami dan nyaman tanpa terlalu memikirkan tentang seperti bagaimana tampilan Model Obyek Dokumen (DOM) .

Skinny di Backbone Views

Tampilan adalah salah satu komponen paling kuat dan fleksibel di Backbone. Menurut penulis Backbone:

Tampilan backbone adalah konvensi yang hampir lebih dari sekadar kode - mereka tidak menentukan apa pun tentang HTML anda atau CSS untuk anda, dan dapat digunakan dengan pustaka template JavaScript.

Mereka terbiasa memanipulasi apa yang pengguna lihat di browser mereka, dan mereka memfasilitasi komunikasi dengan model. Akibatnya, dalam paradigma Model-View-Controller, ada gunanya memikirkan Backbone Views sebagai view dan controller.

Hal ini memiliki implikasi serius saat mengembangkan aplikasi dengan interaksi pengguna yang signifikan. Sebenarnya, ada banyak situasi di mana anda mungkin ingin menggunakan beberapa perpustakaan lain untuk memanipulasi DOM. Visualisasi data dan game berbasis web adalah dua contoh di mana anda mungkin memilih untuk memiliki perpustakaan lain yang menangani sebagian tampilan pengguna anda. Akibatnya, anda mungkin mempertimbangkan untuk menggunakan jQuery, d3.js, crossfilter, atau three.js untuk beberapa kebutuhan manipulasi DOM anda.

Untungnya, ada cara untuk membuat Backbone berfungsi dengan baik dengan manipulator DOM lainnya.

Memanipulasi Model Objek Dokumen di Backbone

Sebelum kita masuk ke dalamnya, mari kita tinjau manipulasi DOM di Backbone. Mari kita mulai dengan objek tampilan dasar.

var SomeView = Backbone.View.extend({ 
    // Some definition stuff here 
}); 

var aView = new SomeView();

Baik Sekarang, mari kita sampaikan pandangan bagaimana membuat dirinya sendiri dengan mendefinisikan metode .render(). metode

var SomeView = Backbone.View.extend({ 
    // define how to render something 
    render: function() { 
        // get some HTML 
        var htmlContent = "<p>This some HTML that will be inserted into the DOM</p>"; 
        
        // insert the html
        this.$el.html(htmlContent); 
        
        // return an instance of the object for chaining
        return this; 
    } 
});

Ada beberapa hal yang terjadi di sini, jadi mari kita ikuti langkahnya.

Mendefinisikan .render() metode

Pertama, kita definisikan metode .render() yang mengenkapsulasi logika yang diperlukan untuk membuat HTML. Perhatikan bahwa Backbone hadir dengan metode .render() di luar jangkauan. Namun, itu tidak melakukan apapun. Ia dirancang untuk ditimpa dengan logika kustom!

Mendapatkan Konten HTML

Contoh di atas mengasumsikan bahwa anda mendapatkan HTML di suatu tempat. Anda bisa menggunakan garis bawah _.template (). Sebagai alternatif, kita bisa menggunakan perpustakaan template lainnya, seperti Handlebars (favorit pribadi saya). Yang benar-benar penting adalah, entah bagaimana, kita mendapatkan beberapa konten HTML.

Apa itu `el`?

Kita butuh tempat untuk meletakkan konten HTML; itulah gunanya el. Seperti .render (), el adalah atribut yang dilengkapi dengan Backbone Views di luar kotak. Ia merujuk pada elemen HTML (dan semua anak-anaknya) yang terdapat dalam tampilan ini. Dalam contoh di atas, kami tidak menentukannya el. Secara default, el adalah div Namun, kita bisa dengan mudah mengatur elemen induk seperti:

var SomeView = Backbone.View.extend({ 
    el: "article", ... 
}); 

var aView = new SomeView();

console.log(aView.el); // an empty "article" HTML element

Ada juga $el, yang hanya el dibungkus jQuery. Kita lihat nanti bahwa $el memainkan peran yang kuat dalam menguasai Backbone views.

Mengembalikan `this` ...

Akhirnya, kita mengembalikan referensi ke objek itu sendiri untuk memungkinkan melakukan chaining. Meski tidak benar-benar dibutuhkan, mengembalikan this adalah konvensi. Tanpa return this, kita perlu beberapa cara untuk mengakses konten HTML elemen. Kode berikut menggambarkan solusi alternatif.

/** 
 * If render() returns nothing, we are really 
 * accessing the `el` property of undefined, which does not 
 * exist!
 */
aView.render().el; // Should throw an error 
 
// Try accessing the HTML 
console.log(aView.el); // Should be empty (but defined!) 

// add HTML to the DOM of 'aView' 
aView.render(); 

// Try accessing the HTML again 
console.log(aView.el) // Should contain the HTML

Uhh, tidak ada yang ada di layar!

Poin bagus. Meskipun k ita panggil .render (), tidak ada sesuatu di layar-apa yang bisa diberikan?

Hal ini terjadi karena kita belum berinteraksi dengan DOM. Yang kami lakukan hanyalah menghasilkan beberapa HTML dan mewakilinya dalam objek JavaScript yang disebut aView. Karena sekarang kita memiliki akses ke HTML yang dihasilkan, yang harus kita lakukan adalah menambahkan atau memasukkan HTML di DOM aplikasi web anda.

Untuk memindahkan semuanya, kami juga akan menyiapkan aplikasi mini sehingga saat laman dimuat, tampilan akan muncul. Berikut adalah tampilan HTML dan JavaScript anda.

Setup HTML dasar

<html>
    <head>
        <meta charset="utf-8">
        <title>My Awesome Backbone App</title> 
        <!-- Include your CSS Here -->
        <link rel="stylesheet" type="text/css" href="/css/styles.css" />
        
        <!-- Include JS dependencies --> 
        <!-- Backbone depends on underscore and, in this example, 
             depends on jQuery. Please note the order of the 
             dependencies --> 
        <script src="/js/lib/jquery.js"></script>
        <script src="/js/lib/underscore.js"></script>
        <script src="/js/lib/backbone.js"></script>    
    </head>
    <body>
        <div class="app"></div> 
        <!-- Include your custom Backbone code in the below script -->
        <script src="/js/app.js"></script>            
    </body>
</html>

Inilah yang Terjadi di App.js

// Create a view 
var SomeView = Backbone.View.extend({ 
    initialize: function() {}, 
    render: function() { 
        var someHTML = "<p>This is some HTML</p>"; 
        this.$el.html(someHTML); 
        return this; 
    } 
}); 

// Create a router
var Router = Backbone.Router.extend({ 
    // define your routes 
    routes: { "": "home" }, 
    home: function() { 
        var aView = new SomeView(); 
        $('.app').html(aView.render().el); 
    } 
}); 

// Instantiate your router 
new Router(); 

// Start tracking history 
Backbone.history.start();

Pergi ke server / browser lokal Anda, muat halaman, dan aplikasi anda harus berjalan!

Menggunakan Backbone dan jQuery secara bersamaan

Fleksibilitas Backbone memungkinkan penggunaan perpustakaan pihak ketiga untuk memanipulasi DOM. Salah satu skenario adalah ketika anda ingin menggunakan jQuery dan Backbone secara bersamaan untuk memanipulasi view Anda. Berikut adalah contoh yang diperbarui.

var SomeView = Backbone.View.extend({ 
    
    // Manipulate DOM indirectly by creating HTML content in a 
    // Backbone View 
    render: function() { 
        var someHTML = "<p>Some HTML</p><p class='empty'><p>"; 
        this.$el.html(someHTML); 
        return this;
    }, 
    
    // Manipulate DOM directly from within the Backbone View
    renderWithJQuery: function() { 
        var otherHTML = "<p>Other HTML</p>"; 
        $('.app').append(otherHTML); 
        
        // may not make sense to return 'this' 
    }, 
    
    // another render method, to keep things interesting 
    specialRender: function() { 
        this.$('.empty').append("<span>No longer empty!</span>"); 
        return this; 
    } 
}); 

// Later in your app... 

// create the view 
var aView = new SomeView(); 

// change the DOM to reflect the newly created view 
$('.app').html(aView.render().el); 

// append more content directly to the DOM using jQuery within 
// a Backbone view object 
aView.renderWithJQuery();

Kode di atas akan menghasilkan dua paragraf pada halaman. Paragraf pertama berisi "Beberapa HTML". Paragraf kedua berisi "HTML Lain".

Untuk menguji pemahaman anda tentang ini, balikkan pemanggilan metode seperti:

// SomeView is already defined 

var aView = new SomeView(); 

aView.renderWithJQuery(); 

$('.app').html(aView.render().el);

Kode di atas akan menghasilkan satu paragraf: "Beberapa HTML". Dalam kedua kasus tersebut, ada juga elemen <p> tak berisikan apaun di dalamnya. Kita akan membahasnya sebentar lagi.

Memanipulasi DOM di Backbone Views secara efisien

Memahami keajaiban manipulasi DOM yang efisien (dan traversal) membutuhkan pemahaman this.$el dan this.$(). Dengan menggunakan this.$el, kita scoping manipulasi DOM dengan isi yang terkandung dalam view. Dengan menggunakan this.$(), kita scoping DOM traversal ke pohon DOM dalam view.

Akibatnya, dalam konteks Backbone, beberapa penggunaan $() (dari pada ini. this.$()) bisa tidak efisien. Sebagai contoh, katakanlah kita ingin melintasi DOM untuk menemukan beberapa elemen. Kita bisa menggunakan metode traversal DOM yang umum, termasuk .find (), .children () .closest (), . first (), dan sebagainya.

Jika kita tahu, priori, bahwa elemen yang kita cari terletak di suatu tempat di dalam view DOM, maka sebaiknya kita gunakan this.$() untuk menghindari pencarian pohon DOM yang lebih besar yang tidak perlu. Jika elemen yang kita cari terletak di luar view DOM, maka kita harus menggunakan $().

Misalnya, metode .specialRender() menggunakan DOM traversal lokal untuk memastikan bahwa kita mencari elemen dengan kelas empty dalam konteks tampilan. Jika ditemukan, ia menetapkan konten HTML dari elemen tersebut untuk menyertakan span dan teks "Tidak lagi kosong".

Kesimpulan

Pada artikel ini, kami meninjau kembali tampilan Backbone, membahas bagaimana membuat tampilan Backbone di DOM, dan mengeksplorasi bagaimana membuat Backbone berfungsi dengan baik dengan perpustakaan lain yang mungkin ingin anda gunakan untuk memanipulasi DOM. Kita juga belajar tentang metode traversal DOM lokal dan metode yang diidentifikasi untuk secara efisien dan tidak efisien melintasi DOM.

Bagian selanjutnya dari artikel ini akan menggali lebih dalam contoh yang lebih rumit untuk mendapatkan banyak perpustakaan agar bisa bekerja sama dalam memanipulasi DOM.