Membangun Manajer Kontak Menggunakan Backbone.js: Bagian 1

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Dalam tutorial ini, kita akan melihat membuat manajer kontak yang berfungsi penuh menggunakan Backbone.js, Underscore.js, dan jQuery. Kita akan melihat komponen dasar yang membuat Backbone dicentang serta beberapa metode kenyamanan yang diekspos oleh Underscore.

Apa Sebenarnya Semua Perpustakaan Ini?

Backbone adalah framework arsitektur yang memungkinkan kita untuk dengan mudah membuat aplikasi JavaScript non-sepele menggunakan organisasi dan struktur gaya MVC. Backbone tidak dianggap sebagai MVC-C yang benar untuk Koleksi, bukan Pengontrol, tetapi masih menawarkan banyak manfaat yang sama dan memungkinkan kita untuk menulis kode yang kuat namun dapat dipertahankan.

Underscore adalah pustaka utilitas yang menyediakan fungsionalitas yang disempurnakan ke JavaScript, menambahkan fungsi tambahan untuk bekerja dengan array, koleksi, fungsi, dan objek.

Saya yakin jQuery tidak perlu diperkenalkan di sini.

Memulai

Kita akan memerlukan folder proyek root yang berisi subfolder css, img dan js, jadi silakan buat sekarang. Kita akan mulai dengan halaman HTML berikut:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Backbone.js Web App</title>
        <link rel="stylesheet" href="css/screen.css" />
    </head>
    <body>
        <div id="contacts"></div>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/Underscore-min.js"></script>
        <script src="js/Backbone-min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

Simpan ini sebagai index.html di folder proyek root. Satu-satunya persyaratan wajib Backbone adalah Underscore.js, tetapi kita juga ingin memanfaatkan jQuery sehingga kita menautkan ke dua pustaka ini sebelum Backbone. Kode aplikasi kita akan masuk ke app.js dan gaya apa pun akan masuk ke screen.css. Di halaman tersebut, kita memiliki wadah kosong yang akan menjadi dasar aplikasi.

Selanjutnya kita dapat membuat file JavaScript kerangka yang secara bertahap akan kita isi selama seri ini. Dalam file baru tambahkan kode berikut:

(function ($) {

    var contacts = [
        { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" },
        { name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" },
        { name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" },
        { name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" }
    ];

} (jQuery));

Simpan ini di folder js sebagai app.js. Kita akan meletakkan semua kode dalam fungsi anonim yang segera dipanggil, alias jQuery sebagai karakter $. Yang juga didefinisikan pada tahap ini adalah array objek di mana setiap objek mewakili kontak.

Kita akan menggunakan penyimpanan data lokal ini untuk bagian tutorial ini karena memungkinkan untuk membuat beberapa skrip dan berjalan tanpa perlu khawatir banyak tentang sinkronisasi dengan server. Kita akan menyimpannya untuk hari lain!

Model

Model merepresentasikan data suatu aplikasi; dalam aplikasi ini akan berupa kontak individual, yang akan memiliki atribut seperti nama, nomor kontak, dll. Anda dapat mengatakan bahwa model individual mewakili bagian atom dari aplikasi - unit fungsional terkecil yang mungkin. Tambahkan kode berikut langsung setelah array data:

var Contact = Backbone.Model.extend({
    defaults: {
        photo: "/img/placeholder.png"
    }
});

Untuk membuat model di Backbone kita cukup memperluas kelas Backbone.Model menggunakan metode extended(). Kita dapat mengirimkan objek ke metode yang memungkinkan kita untuk menyesuaikan model dengan fungsionalitas kita sendiri. Salah satu properti yang dapat kita atur dalam objek ini disebut default. Properti ini memungkinkan kita untuk mengonfigurasikan nilai default untuk setiap atribut yang diinginkan untuk dimiliki oleh model.

Dalam hal ini, kita menetapkan gambar placeholder sebagai nilai default atribut photo untuk instance model. Model apa pun yang tidak memiliki atribut ini saat ditentukan akan diberikan.

Model memiliki properti lain yang dapat digunakan untuk menambah fungsionalitas; kita dapat mendefinisikan metode initialize(), dan metode ini akan dipanggil secara otomatis oleh Backbone untuk kita ketika setiap model diinisialisasi. Kita tidak akan menggunakan ini saat ini, tetapi jangan khawatir, kita akan kembali ke model nanti.

Koleksi

Koleksi adalah kelas untuk mengelola kelompok model. Kita akan menggunakan yang sederhana dalam contoh ini untuk menyimpan semua kontak. Tambahkan kode berikut langsung setelah model Contact:

var Directory = Backbone.Collection.extend({
    model: Contact
});

Seperti model, koleksi adalah kelas Backbone yang diperluas untuk menambahkan fungsionalitas khusus untuk aplikasi. Koleksi juga memiliki metode extended(), dan ia menerima objek yang memungkinkan kita untuk mengatur properti kelas dan menambahkan perilaku. Kita menggunakan properti model untuk memberi tahu koleksi dari mana kelas setiap item dalam koleksi harus dibuat, yang dalam hal ini adalah contoh dari model Contact. Jangan khawatir bahwa kelas yang didefinisikan sejauh ini tampak sangat sederhana, kita akan kembali dan menambahkan fungsionalitas tambahan di bagian selanjutnya dari tutorial.

Tampilan

Tampilan bertanggung jawab untuk menampilkan data aplikasi di halaman HTML. Salah satu manfaat memisahkan bagian-bagian aplikasi yang memproses data dan bagian-bagian yang menampilkan data adalah bahwa didapat dengan mudah membuat perubahan ke satu, tanpa memerlukan perubahan besar ke yang lain. Kita akan menggunakan beberapa tampilan dalam aplikasi, yang pertama harus ditambahkan langsung setelah kelas Directory:

var ContactView = Backbone.View.extend({
    tagName: "article",
    className: "contact-container",
    template: $("#contactTemplate").html(),

    render: function () {
        var tmpl = _.template(this.template);

        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});

Tampilan ini menangani menampilkan kontak individual. Sama seperti model dan koleksi, view memiliki metode extended() yang digunakan untuk memperluas kelas Backbone.View. Kita menetapkan beberapa properti instance dalam tampilan; properti tagName digunakan untuk menentukan wadah untuk tampilan dan properti className menentukan nama kelas yang ditambahkan ke wadah ini. Kita akan menggunakan templat sederhana dalam file HTML untuk membuat setiap kontak, sehingga properti template menyimpan referensi yang di-cache ke templat, yang dipilih dari halaman menggunakan jQuery.

Selanjutnya kita mendefinisikan fungsi render(); fungsi ini tidak dipanggil secara otomatis oleh Backbone dan sementara kita dapat memanggilnya dari metode initialize() yang dipanggil secara otomatis untuk membuat tampilan menjadi otomatis, kita tidak perlu dalam hal ini.

Di dalam metode render() kita menyimpan referensi ke metode Underscore's template() dan meneruskannya ke templat yang tersimpan. Ketika melewati argumen tunggal yang berisi templat Underscore tidak memohonnya segera tetapi akan mengembalikan metode yang dapat dipanggil untuk benar-benar merender templat.

Kita kemudian mengatur konten HTML dari elemen <article> yang dibuat oleh tampilan ke template yang diinterpolasi menggunakan metode html() jQuery untuk kenyamanan. Ini dilakukan dengan memanggil fungsi templating yang Underscore kembalikan sebelumnya dan meneruskannya data untuk diinterpolasi. Data diperoleh dari model menggunakan metode tobone() Backbone pada model. Interpolasi hanya berarti bahwa token dalam template diganti dengan data aktual. Perhatikan juga bahwa kami menggunakan $el untuk mengatur konten HTML; ini adalah objek jQuery yang di-cache yang mewakili elemen saat ini sehingga kita tidak harus terus membuat objek jQuery baru.

Pada akhir render() metode, kita kembali this objek, yang menunjuk ke contoh lihat bahwa metode render() disebut. Ini agar kita bisa mengaitkan metode Backbone lainnya ke tampilan instance setelah memanggil metode render() -nya.

Micro Templating Dengan Garis Bawah

Sekarang mungkin akan menjadi waktu yang tepat untuk melihat fasilitas templating mikro bawaan Underscore. Underscore menyediakan metode template() seperti yang dilihat untuk mengkonsumsi dan menyisipkan templat. Ke halaman HTML kita harus menambahkan template yang akan digunakan; tambahkan kode berikut secara langsung setelah wadah kontak <div>:

<script id="contactTemplate" type="text/template">
    <img src="<%= photo %>" alt="<%= name %>" />
    <h1><%= name %><span><%= type %></span></h1>
    <div><%= address %></div>
    <dl>
        <dt>Tel:</dt><dd><%= tel %></dd>
        <dt>Email:</dt><dd><a href="mailto:<%= email %>"><%= email %></a></dd>
    </dl>
</script>

Kita menggunakan elemen <script> dengan atribut id sehingga kita dapat dengan mudah memilihnya, dan atribut type khusus sehingga browser tidak mencoba untuk menjalankannya. Di dalam templat kita menentukan struktur HTML yang ingin digunakan, dan menggunakan token untuk menentukan di mana data model harus dimasukkan. Ada beberapa fitur lain yang dapat dimanfaatkan dengan Underscore termasuk interpolasi nilai-nilai HTML yang lolos, atau mengeksekusi JavaScript sewenang-wenang, tetapi kita tidak perlu menggunakannya untuk tujuan tutorial ini.

Pandangan Master

Untuk menyelesaikan bagian tutorial ini kita akan membuat satu tampilan lagi. Tampilan kita saat ini mewakili setiap kontak individual sehingga dipetakan ke model berdasarkan 1: 1. Tetapi tampilan ini bukan hasil render sendiri dan kita belum memintanya. Yang dibutuhkan adalah tampilan yang memetakan 1: 1 ke koleksi, tampilan master yang akan memberikan jumlah tampilan kontak yang tepat untuk menampilkan masing-masing kontak. Langsung setelah ContactView, tambahkan kelas berikut:

var DirectoryView = Backbone.View.extend({
    el: $("#contacts"),

    initialize: function () {
        this.collection = new Directory(contacts);
        this.render();
    },

    render: function () {
        var that = this;
        _.each(this.collection.models, function (item) {
            that.renderContact(item);
        }, this);
    },

    renderContact: function (item) {
        var contactView = new ContactView({
            model: item
        });
        this.$el.append(contactView.render().el);
    }
});

Tampilan ini akan dilampirkan ke elemen yang sudah ada di halaman, wadah kosong yang dikodekan ke dalam <body>, jadi kita memilih elemen dengan jQuery dan mengaturnya sebagai properti el. Ketika kemudian mendefinisikan fungsi initialize() sederhana yang menciptakan turunan dari kelas koleksi kita dan kemudian memanggil metode render() sendiri, membuat tampilan ini dibuat sendiri.

Kita kemudian mendefinisikan metode render() untuk tampilan master. Di dalam fungsi, kita menyimpan referensi ke tampilan sehingga kita dapat mengaksesnya dalam fungsi panggilan balik, dan kemudian menggunakan metode underscore's each() untuk beralih ke setiap model dalam koleksi.

Metode ini menerima dua argumen (dalam bentuk ini, meskipun dapat juga digunakan hanya dengan satu argumen); yang pertama adalah kumpulan item yang harus diulang, yang kedua adalah fungsi anonim yang akan dieksekusi untuk setiap item. Fungsi callback ini menerima item saat ini sebagai argumen. Yang dilakukan dalam fungsi callback ini adalah memanggil metode renderContact() dan meneruskannya ke item saat ini.

Terakhir kita mendefinisikan metode renderContact(). Dalam metode ini kita membuat instance baru dari kelas ContactView (ingat, kelas ContactView mewakili kontak individu) dan mengatur properti model ke item yang diteruskan ke metode. Kita kemudian menambahkan elemen yang dibuat dengan memanggil metode render() view ke properti $el dari tampilan master DirectoryView (wadah kosong yang dipilih dari halaman). Properti $el adalah objek jQuery di-cache yang dibuat Backbone untuk kita secara otomatis.

Tampilan master bertanggung jawab untuk menghasilkan setiap model individual dalam koleksi. Yang perlu kita lakukan adalah menginisialisasi tampilan master kita, dan karena itu adalah render sendiri, itu akan menampilkan semua kontak yang ditentukan dalam array data dummy:

var directory = new DirectoryView();

Saat kita menjalankan halaman ini di browser sekarang, kita akan melihat representasi visual dari data:

Backbone membuat instance model untuk setiap item dalam array asli kita, yang disimpan dalam koleksi dan ditampilkan sebagai instance tampilan.

Tutorial ini bukan tentang CSS, jadi saya belum membahas contoh CSS sama sekali. Ini hanya CSS dasar, jika Anda ingin melihat lembar gaya yang disertakan dalam arsip demo.

Ringkasan

Di bagian tutorial ini, kita telah diperkenalkan ke beberapa komponen inti dari Backbone.js; model, koleksi dan tampilan. Model adalah kelas yang bisa kita buat untuk menyimpan data tentang hal tertentu dan mendefinisikan perilaku untuk itu. Koleksi digunakan untuk mengelola kelompok model dan tampilan memungkinkan kita untuk merender model menggunakan templat yang diinterpolasi yang menampilkan data dari model.

Pada bagian selanjutnya dari tutorial ini, kita akan melihat bagaimana kita dapat memfilter koleksi kita untuk menampilkan hanya sebagian dari model kita. Kita juga akan melihat komponen utama Backbone - Router.