Meteor: Tentang Meteor Template

Untuk memudahkan dalam pengembangan Meteor, kita akan mengadopsi pendekatan luar-dalam. Dengan kata lain kita akan membangun sebuah HTML/JavaScript secara asal terlebih dahulu, dan kemudian nanti kita sambungkan ke aplikasi.

Ini berarti bahwa dalam bab ini kita hanya akan membahas tentang apa yang terjadi di dalam direktori /client.

Jika Anda belum melakukannya, buat file baru bernama main.html dalam direktori /client kita, dan isi dengan kode berikut:
<head> <title>Microscope</title> </head> <body> <div class="container"> <header class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="/">Microscope</a> </div> </header> <div id="main"> {{> postsList}} </div> </div> </body>

Ini akan menjadi template utama aplikasi kita. Seperti yang Anda lihat itu semua HTML, kecuali untuk satu {{ >postsList }} template tag, yang merupakan titik penyisipan dari postsList template. Untuk saat ini, mari kita membuat beberapa template lagi.

Meteor Templates

Pada intinya, sebuah situs berita sosial terdiri dari posting terorganisir dalam daftar, dan seperti itulah bagaimana kita akan mengatur template kita.

Mari kita membuat /templates direktori dalam /client. Ini adalah tempat kita akan menyimpan semua template, dan agar lebih, kita juga buat /posts dalam /templates untuk menyimpan template yang berhubungan dengan post.

Menemukan file - file
Meteor sangat hebat dalam hal menemukan file. Tidak peduli di mana Anda meletakkan kode di direktori /client, Meteor akan menemukannya dan men-compile dengan benar. Ini berarti Anda tidak perlu secara manual menulis termasuk jalur untuk file JavaScript atau CSS.

Ini juga berarti Anda bisa meletakkan semua file dalam direktori yang sama, atau bahkan semua kode Anda dalam file yang sama. Tapi karena Meteor akan men-compile semuanya ke dalam satu minified file, kita lebih baik meletakkan file dan menggunakan struktur file dengan rapih.

Kita akhirnya siap untuk membuat template kedua. Di dalam client/template/posts, dan membuat posts_list.html:
<template name="postsList"> <div class="posts"> {{#each posts}} {{> postItem}} {{/each}} </div> </template>

Dan post_item.html:
<template name="postItem"> <div class="post"> <div class="post-content"> <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3> </div> </div> </template>

Perhatikan name = "postsList" atribut elemen Template. Ini adalah nama yang akan digunakan oleh Meteor untuk melacak template tersebut (catatan: sebenarnya nama file tidak harus sama).

Dan ini saatnya untuk memperkenalkan sistem template Meteor, Spacebars. Spacebars hanya HTML, dengan penambahan tiga hal: inclusions (atau juga bisa disebut "parsial" ), expressions dan block helpers .

Inclusions menggunakan {{ >templateName }} sintaks, dan ini bertugas memberitahu Meteor untuk menggantikan "parsial" tersebut dengan template yang namanya sama (dalam kasus kami yaitu postItem).

Expressions seperti {{title}} bertugas baik untuk memanggil properti dari objek ini, atau menampilkan value dari template helper seperti didefinisikan dalam manajer template saat ini (keterangan lebih lanjut tentang ini akan dijelaskan nanti).

Terakhir, Block helpers adalah tag khusus yang berperan sebagai controller dalam template, seperti {{#each}}...{{/each}}atau{{#if}}...{{/if}}.

Lebih lanjut tentang Meteor template?
Anda dapat lihat di Spacebars dokumentasi jika Anda ingin mempelajari lebih lanjut tentang Spacebars.

Berbekal pengetahuan ini, kita bisa mulai memahami apa yang terjadi di sini.

Pertama, dalam postsList Template, kita iterasi melalui objek posts dengan {{#each}}...{{/each}} block helper. Kemudian, untuk setiap iterasi tersebut kita masukkan postItem Template.

Darimana objek posts ini berasal? Pertanyaan bagus. Ini sebenarnya template helper, dan Anda dapat menganggapnya sebagai tempat untuk data dinamis.

postItem template itu sendiri cukup mudah. Hanya menggunakan tiga ekspresi: {{url}} dan {{title}} keduanya menampilkan properti dokumen, dan {{domain}} memanggil template helper.

Template Helpers

Kita sudah berhadapan dengan Spacebars, yang lebih dari sebuah HTML dengan beberapa tag khusus. Tidak seperti bahasa lain seperti PHP (atau bahkan halaman HTML biasa, yang dapat menyertakan JavaScript), Meteor membuat template dan logika mereka terpisah, dan template ini tidak berbuat banyak dengan sendirinya.

Untuk "menghidupkan" template tersebut, template membutuhkan helpers. Anda dapat menganggap helpers ini sebagai koki yang mengambil bumbu(data) dan mempersiapkan mereka, sebelum memberikan hidangan(template) ke pelayan, yang kemudian menyajikannya kepada Anda.

Dengan kata lain, sedangkan peran template terbatas pada menampilkan atau me-looping variables, helpers adalah yang bekerja keras memberikan value/data untuk setiap variabel.

Controllers?
Mungkin sebagian Anda berpikiran template helper sebagai controller. Dalam hal ini akan nampak ambigu, apalagi jika Anda berpikir ke arah MVC terminologi karena dalam Meteor template ini sedikit sangat berbeda.

Jadi kita putuskan untuk menjauh dari terminologi itu, dan hanya merujuk kepada "template helper" atau "template logic" ketika kita berbicara tentang kode Javascript pada template.

Untuk lebih memudahkan, kita akan mengadopsi konvensi penamaan file yang berisi template helper sama dengan nama templatenya, tetapi dengan .js ekstensi. Jadi mari kita membuat posts_list.js di dalam client/template/posts dan mulai membangun helper pertama kita:

var postsData = [ { title: 'Introducing Telescope', url: 'http://sachagreif.com/introducing-telescope/' }, { title: 'Meteor', url: 'http://meteor.com' }, { title: 'The Meteor Book', url: 'http://themeteorbook.com' } ]; Template.postsList.helpers({ posts: postsData });

Jika Anda sudah melakukan dengan benar, Anda sekarang harus melihat sesuatu yang mirip dengan ini di browser Anda:

Kita melakukan dua hal di sini. Pertama kita menyiapkan beberapa data contoh di postsData array. Data yang biasanya dari database, tapi karena kita belum membahas tentang database (ada di bab berikutnya!), maka kita menggunakan data statis untuk sementara.

Kedua, kita menggunakan fungsi Template.postsList.helpers() untuk membuat template helper yang disebut posts yang menampilkan postsData yang kita telah buat di atas.

Jika Anda ingat, kita menggunakan yang posts helper di postsList template:
<template name="postsList"> <div class="posts"> {{#each posts}} {{> postItem}} {{/each}} </div> </template>

Dengan mendefinisikan helper posts, berarti kita siap menggunakannya pada template tersebut, artinya sekarang template kita dapat mengakses array postsData dan memasukkan tiap data array tersebut ke postItem Template.

The domain Helper

Sama dengan sebelumnya, sekarang kita buat post_item.js untuk menyimpan logika pada postItem template:

Template.postItem.helpers({ domain: function() { var a = document.createElement('a'); a.href = this.url; return a.hostname; } });

Kali ini nilai helper domain kita bukan array, tetapi sebuah function. Pola ini jauh lebih umum (dan lebih berguna) dibandingkan dengan data dummy sebelumnya.

Helper domain mengambil URL dan mengembalikan domainnya melalui JavaScript. Pertanyaannya, di mana kita membutuhkan helper ini?

Untuk menjawab pertanyaan itu kita perlu kembali ke template posts_list.html. Dari {{#each}} block helper tidak hanya iterates array kita, tapi juga men-set value dari this didalam object tersebut.

Ini berarti bahwa antara kedua {{#each}} tag , setiap posting ditujukan untuk this secara berulang, yang dijalankan ke dalam helper ini (post_item.js) .

Sekarang kita mengerti mengapa this.url mengembalikan URL posting. Dan terlebih lagi, jika kita menggunakan {{title}} dan {{url}} dalam template post_item.html, Meteor tahu bahwa yang kita maksud dengan this.title dan this.url dan mengembalikan nilai yang benar.

JavaScript Magic

Meskipun hal ini tidak spesifik untuk Meteor, inilah penjelasan singkat dari "JavaScript Magic". Pertama, kami menciptakan anchor kosong (a) elemen HTML dan menyimpannya dalam memori.

Kami kemudian menetapkan atribut href menjadi sama dengan URL posting saat ini (seperti yang kita ketahui, dalam helper this adalah objek yang sedang diproses) .

Akhirnya, kami mengambil keuntungan dari spesial elemen a yaitu properti hostname untuk mendapatkan nama domain tanpa menampikan keseluruhan URL.

Jika Anda telah mengikuti bab ini dengan benar, Anda pasti melihat daftar postingan di browser Anda. Daftar itu hanya data statis, sehingga tidak mengambil keuntungan dari fitur Meteor yang real-time. Kami akan menunjukkan cara untuk mengubah itu di bab berikutnya.

Hot Code Reload

Anda mungkin telah memperhatikan bahwa Anda bahkan tidak perlu secara manual me-reload/refresh jendela browser Anda setiap kali Anda mengubah file.

Hal ini karena Meteor melacak semua file dalam direktori proyek Anda, dan secara otomatis me-refresh browser untuk Anda ketika mendeteksi sebuah modifikasi salah satu dari mereka.

Meteor Hot Code Reload ini cukup cerdas, bahkan menjaga status aplikasi Anda untuk tetap update!

Sumber blog/artikel ini adalah dari buku DiscoverMeteor yang sudah diterjemahkan ke dalam bahasa Indonesia atas izin dari sang penulis aslinya.

Next: Meteor Real-time Collection

Cendekia P Putra

< Software Developer /> | @cendekiapp | me@cendekiapp.com

Jakarta, Indonesia http://cendekiapp.com