Template Meteor menggunakan tiga tingkat atas tag. Dua yang pertama adalah head dan body. Tag ini melakukan pekerjaan yang sama seperti HTML biasa. Tag ketiga adalah template. Ini adalah tempat di mana kita terhubung HTML ke JavaScript.
Postingan Terkait : Mengenal Bahasa Pemograman HTML
Simple Template
Contoh berikut menunjukkan bagaimana ini bekerja. kita akan membuat template dengan nama atribut = "myParagraph". Tag template kita akan dibuat di bawah dari elemen body, tetapi kita perlu memasukkannya sebelum ia dituliskan pada layar. Kita dapat melakukannya dengan menggunakan sintak {{> myParagraph}}. Dalam template kita juga menggunakan kurung kurawal ganda ({{teks}}). Ini adalah bahasa template meteor yang disebut Spacebars.
Dalam file JavaScript kami kita menetapkan method Template.myParagraph.helpers({}) yang akan menjadi jembatan kita untuk menghubungkan dengan template kita. Kita hanya menggunakan teks helper dalam contoh ini.
Postingan Terkait : Pengertian dan manfaat JavaScript dalam membangun WEB
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<h1>Header</h1>
{{> myParagraph}}
</body>
<template name = "myParagraph">
<p>{{text}}</p>
</template>meteorApp.js
if (Meteor.isClient) {
// This code only runs on the client
Template.myParagraph.helpers({
text: 'This is paragraph...'
});
}
Setelah kita menyimpan perubahan, kita akan mendapatkan output sebagai berikut
Blok Template
Dalam contoh ini kita gunakan {{#each paragraf}} untuk paragraf array dan template name = "paragraf" untuk setiap nilai.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{#each paragraphs}}
{{> paragraph}}
{{/each}}
</div>
</body>
<template name = "paragraph">
<p>{{text}}</p>
</template>
Kita perlu membuat paragraf helper. Ini akan menjadi sebuah array dengan lima nilai teks.
meteorApp.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
paragraphs: [
{ text: "This is paragraph 1..." },
{ text: "This is paragraph 2..." },
{ text: "This is paragraph 3..." },
{ text: "This is paragraph 4..." },
{ text: "This is paragraph 5..." }
]
});
}
Sekarang kita dapat melihat lima paragraf pada layar.
Membuat Collection Meteor
Pada Bagian ini kita akan menunjukkan kepada Anda bagaimana menggunakan mongoDB collections.
Kita dapat membuat collectio baru dengan − kode berikut
meteorApp.js
MyCollection = new Mongo.Collection('myCollection');Menambahkan Data
Setelah collection dibuat, kita dapat menambahkan atau memasukkan data dengan menggunakan method insert.
meteorApp.js
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);Menemukan Data
Kita dapat menggunakan method find untuk mencari data dalam collection.
meteorApp.js
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);
var findCollection = MyCollection.find().fetch();
console.log(findCollection);
Konsol akan menunjukkan data kita yang dimasukkan sebelumnya.
Kita bisa mendapatkan hasil yang sama dengan menambahkan parameter pencarian.
meteorApp.js
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);
var findCollection = MyCollection.find({key1: "value 1..."}).fetch();
console.log(findCollection);Memperbarui / Update Data
Langkah berikutnya adalah untuk memperbarui data. Setelah kita menciptakan koleksi dan dimasukkan data baru, kita dapat menggunakan method update.
meteorApp.js
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);
var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;
var updatedData = {
key1: "updated value 1...",
key2: "updated value 2...",
key3: "updated value 3...",
key4: "updated value 4...",
key5: "updated value 5..."
}
MyCollection.update(myId, updatedData);
var findUpdatedCollection = MyCollection.find().fetch();
console.log(findUpdatedCollection);
Konsol akan menunjukkan bahwa collection telah diperbarui.
Menghapus / Delete Data
Menghapus data dari ollection dapat dilakukan dengan menggunakan method remove. Kami menetapkan id dalam contoh ini sebagai parameter untuk menghapus data tertentu.
meteorApp.js
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);
var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;
MyCollection.remove(myId);
var findDeletedCollection = MyCollection.find().fetch();
console.log(findDeletedCollection);
Konsol akan menampilkan array kosong.
Jika kita ingin menghapus semuanya dari koleksi, kita dapat menggunakan method yang sama tetapi bukannya id yang akan kita gunakan {} objek kosong. Kita perlu untuk melakukan hal ini pada server untuk alasan keamanan.
meteorApp.js
if (Meteor.isServer) {
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);
MyCollection.remove({});
var findDeletedCollection = MyCollection.find().fetch();
console.log(findDeletedCollection);
}
Kita juga bisa menghapus data dengan menggunakan parameter lain. Seperti pada contoh sebelumnya, Meteor akan memaksa kita melakukan ini dari server.
meteorApp.js
if (Meteor.isServer) {
MyCollection = new Mongo.Collection('myCollection');
var myData = {
key1: "value 1...",
key2: "value 2...",
key3: "value 3...",
key4: "value 4...",
key5: "value 5..."
}
MyCollection.insert(myData);
MyCollection.remove({key1: "value 1..."});
var findDeletedCollection = MyCollection.find().fetch();
console.log(findDeletedCollection);
}
Anda dapat melihat bahwa data dihapus dalam command window.
