-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy path03-templates.md.erb
237 lines (161 loc) · 9.92 KB
/
03-templates.md.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
---
title: Template
slug: templates
date: 0003/01/01
number: 3
points: 1
photoUrl: http://www.flickr.com/photos/73449134@N04/8194499092/
photoAuthor: Mike Lewinski
contents: Belajar tentang bahasa templating Meteor, Spacebars.|Membuat tiga template pertama Anda.|Belajar bagaimana cara kerja majemen Meteor.|Menjalankan prototipe dasar dengan data statis.
paragraphs: 46
---
Untuk memudahkan pengembangan menggunakan Meteor, kita akan mengadopsi pendekatan luar-dalam. Dengan kata lain kita akan membangun HTML/JavaScript dasar terlebih dahulu, baru kemudian mengaitkannya dalam aplikasi kita.
Artinya dalam bab ini kita hanya akan memfokuskan diri dengan apa yang terjadi dalam direktori `/client`.
Mari membuat berkas baru dengan nama `main.html` di dalam `/client`, dan mengisinya dengan kode berikut:
~~~html
<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" class="row-fluid">
{{> postsList}}
</div>
</div>
</body>
~~~
<%= caption "client/main.html" %>
Ini akan menjadi template utama aplikasi kita. Seperti yang kamu lihat, semuanya HTML kecuali tag `{{> postsList}}`, yang merupakan sisipan untuk `postsList`, template berikutnya. Mari kita buat beberapa template lagi.
### Template Meteor
Pada intinya, situs berita sosial terdiri dari lansiran yang terorganisir dalam daftar, dan seperti itu pula kita akan mengatur template kita.
Mari membuat direktori `/templates` didalam `/client`. Direktori ini adalah tempat template-template kita, dan agar tertata rapi kita juga akan membuat `/posts` didalam `/templates` untuk template-template yang berhubungan dengan postingan.
=== break ===
<% note do %>
### Menemukan berkas
Meteor cukup hebat dalam soal menemukan berkas. Dimanapun kamu letakkan kodemu selama masih dalam direktori `/client`, Meteor akan menemukan dan menyusunnya dengan tepat. Artinya kamu tak perlu menulis path sertaan untuk berkas JavaScript atau CSS.
Ini juga berarti kamu bisa meletakkan semua berkas dalam satu direktori, atau bahkan semua kode dalam satu berkas. Namun karena Meteor akan menyusun segalanya dalam satu berkas, ada baiknya kita tetap menyusun berkas secara terstruktur.
<% end %>
Akhirnya kita sudah siap untuk templat kedua. Buat `posts_list.html` dalam `client/views/posts`:
~~~html
<template name="postsList">
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
~~~
<%= caption "client/views/posts/posts_list.html" %>
Selanjutnya `post_item.html`:
~~~html
<template name="postItem">
<div class="post">
<div class="post-content">
<h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
</div>
</div>
</template>
~~~
<%= caption "client/views/posts/post_item.html" %>
Catat elemen atribut `name="postsList"` templat. Ini menjadi nama yang akan digunakan Meteor merekam jejak templat.
Saatnya memperkenalkan Spacebars, sistem penemplatan Meteor. Spacebars sejatinya HTML juga, dengan tiga tambahan: *partials*, *expressions* dan *block helpers*.
*Partials* menggunakan sintaks `{{> templateName}}` dan memberitahu Meteor agar menukar *partials* dengan templat senama (dalam kasus ini `postItem`).
*Expressions* seperti `{{title}}` memanggil properti obyek atau mengembalikan nilai templat *helper* seperti didefinisikan dalam manajer templat (pembahasan selanjutnya menyusul).
Terakhir, *block helpers* adalah tag khusus yang mengatur alur templat, seperti `{{#each}}…{{/each}}` atau `{{#if}}…{{/if}}`.
<% note do %>
### Lebih Jauh
Kamu bisa merujuk ke [dokumentasi Spacebars](https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md) jika kamu ingin belajar lebih jauh soal Spacebars.
<% end %>
Dibekali dengan pengetahuan ini, kita dapat dengan mudah mencerna apa yang tengah terjadi.
Pertama-tama, pada templat `postsList`, kita menampilkan ulang obyek `posts` menggunakan *helper* blok `{{#each}}…{{/each}}`. Kemudian untuk tiap tampilan kita sertakan templat `postItem`.
Darimana datangnya obyek `posts`? Pertanyaan bagus. Ini sebenarnya *helper* templat dan kita akan menggunakannya saat melihat manajer templat.
Templat `postItem` sebenarnya punya fungsi jelas. Dengan hanya menggunakan tiga ekspresi: `{{url}}` dan `{{title}}` yang menghasilkan properti dokumen dan `{{domain}}` memanggil *helper* templat.
Kita telah menyinggung "*helper* templat" berulang kali melalui bab ini tanpa menjelaskan kerja sebenarnya. Untuk bisa mengetahuinya, mari bicara soal manajer dulu.
### Manajer Templat
Kita sudah berurusan dengan Spacebars, yang tak lain HTML dengan sedikit taburan tag. Berbeda dengan bahasa-bahasa lain, misalnya PHP (atau halaman HTML umumnya yang dapat menyertakan JavaScript), Meteor menjaga templat dan logik secara terpisah.
Agar dapat bekerja, templat membutuhkan **manajer**. Kamu bisa menganggap manajer seumpama juru masak yang meracik bumbu mentah (data) dan menyiapkannya, sebelum menyerahkan pada pelayan (templat) untuk disajikan.
Dengan kata lain, oleh sebab peran templat terbatas pada penyajian atau menyusuri variabel-variabel, manajer menjadi satu-satunya yang melakukan pekerjaan berat menentukan nilai tiap variabel.
<% note do %>
### Manajer?
Ketika kita tanyakan kepada para developer Meteor soal manajer templat, sebagian mengatakan "kontroler", dan sebagian lagi mengatakan "berkas-berkas tempat meletakkan kode JavaScript".
Manajer bukan kontroler yang sebenarnya (setidaknya, bukan dalam artian kontroler MVC) dan "TFWIPMJSC" juga bukan istilah menarik, maka kami menolak kedua hal itu.
Oleh sebab kita masih butuh cara mengidentifikasi apa yang kita bincangkan, kami datang dengan istilah "manajer" sebagai jalan pintas yang tak memiliki makna ambigu dalam *frameworks* web.
<% end %>
Agar tetap ringkas, kita adopsi konvensi penamaan manajer setelah nama templat, dengan ekstensi **.js**. Jadi mari buat `posts_list.js` dalam `/client/views/posts` dan mulai membangun manajer pertama kita:
~~~js
var postsData = [
{
title: 'Introducing Telescope',
author: 'Sacha Greif',
url: 'http://sachagreif.com/introducing-telescope/'
},
{
title: 'Meteor',
author: 'Tom Coleman',
url: 'http://meteor.com'
},
{
title: 'The Meteor Book',
author: 'Tom Coleman',
url: 'http://themeteorbook.com'
}
];
Template.postsList.helpers({
posts: postsData
});
~~~
<%= caption "client/views/posts/posts_list.js" %>
Bila kamu melakukannya dengan benar, kamu harusnya melihat sesuatu serupa ini pada peramban:
<%= screenshot "3-1", "Templat pertama kita dengan data statis." %>
<%= commit "3-1", "Templat daftar lansiran dasar dan data statis." %>
Kita melakukan dua hal disini. Pertama kita tata data prototipe dalam array `postsData`. Data tersebut wajarnya datang dari database, namun karena kita belum mempelajarinya (tunggu dibab berikut) kita "curangi" dulu dengan menggunakan data statis.
Kedua, kita menggunakan fungsi `Template.myTemplate.helpers()` Meteor untuk mendefinisi *helper* templat bernama `posts` yang mengembalikan array `postsData` kita.
Mendefinisi *helper* `posts` artinya templat kita sudah bisa menggunakan:
~~~html
<template name="postsList">
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
~~~
<%= caption "client/views/posts/posts_list.html" %>
Dengan ini templat mampu secara berulang menampilkan array `postsData` dan mengirim tiap obyek didalamnya ke templat `postItem`.
### Nilai dari "this"
Sekarang kita akan membuat manajer `post_item.js`:
~~~js
Template.postItem.helpers({
domain: function() {
var a = document.createElement('a');
a.href = this.url;
return a.hostname;
}
});
~~~
<%= caption "client/views/posts/post_item.js" %>
<%= commit "3-2", "Siapkan *helper* `domain` pada `postItem`." %>
Kali ini nilai *helper* `domain` kita bukan array, melainkan sebuah fungsi anonim. Pola ini jauh lebih umum (dan lebih berguna) dibanding contoh data sebelumnya.
<%= screenshot "3-2", "Menampilkan domain untuk tiap link." %>
*helper* `domain` mengambil URL dan mengembalikan domainnya melalui sedikit sihir JavaScript. Tapi darimana url itu diambil?
Untuk menjawab pertanyaan itu kita perlu kembali ke templat `posts_list.html`. *Helper* blok `{{#each}}` bukan sekedar menampil berulang array, melainkan juga **menetapkan nilai `this` dalam blok untuk obyek yang ditampilkan**.
Ini berarti antara tag `{{#each}}`, tiap lansiran telah disisipkan ke dalam `this` secara berurutan dan menyebar dalam manajer templat (`post_item.js`) yang disertakan.
Sekarang kita mengerti mengapa `this.url` mengembalikan URL lansiran saat ini. Bahkan bila kita gunakan `{{title}}` dan `{{url}}` dalam templat `post_item.html` kita, Meteor tau apa yang kita maksudkan dengan `this.title` and `this.url` dan mengembalikan nilai yang tepat.
<% note do %>
### Sihir JavaScript
Kendati bukan khusus untuk Meteor, berikut penjelasan mengenai sihir JavaScript seperti disebutkan diatas. Pertama, kita membuat elemen HTML anchor kosong (`a`) dan menyimpannya dalam ingatan.
Kemudian kita tentukan atribut `href`-nya agar setara dengan URL lansiran saat ini (seperti yang kita saksikan, dalam *helper* `this` merupakan obyek yang tengah beraksi).
Akhirnya kita bisa pungut element `a` dari properti `hostname` untuk mendapatkan link nama domainnya saja.
<% end %>
Jika kamu menyimak dengan benar, kamu harusnya melihat daftar postingan pada perambanmu. List tersebut merupakan data statis, belum menggunakan fitur real-time Meteor. Akan kami tunjukkan caranya nanti pada bab berikutnya!
<% note do %>
### *Hot code reload*
Kamu mungkin memperhatikan bahwa kamu tak perlu me-*reload* peramban secara manual ketika mengubah berkas.
Ini karena Meteor menelusuri seluruh berkas dalam direktori proyek dan secara otomatis me-*refresh* peramban kapan saja modifikasi terdeteksi.
*Hot code reload* Meteor sebenarnya cukup cerdas, sekalipun antara dua *refresh*!
<% end %>