Membuat situs multi-halaman dengan Meteor

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

Seperti dengan aplikasi web, menciptakan multi-halaman situs memerlukan seperangkat alat khusus. Dalam artikel ini, kita akan melihat mengembangkan sebuah perpustakaan yang tidak hanya dapat membedakan antara URI berbeda, tapi satu yang mengambil keuntungan dari fitur inti Meteor's.

Fitur dimaksudkan Perpustakaan

Setiap kali saya harus mengembangkan sebuah perpustakaan yang spesifik dan terfokus seperti ini, saya suka untuk memulai dengan hasil, bagaimana aku ingin ini bekerja?

Jadi, kita dapat mulai dengan menulis beberapa fitur yang kami ingin memiliki:

Kemampuan untuk memuat halaman yang berbeda menurut URI
Membaca parameter dari URI (Penampung)
Menjaga halaman dinamis sesuai Meteor standar

Yang terlihat cukup bagus. Sekarang setelah melihat dari atas fitur ini, Anda mungkin berpikir mereka cukup mirip dengan 'router' jenis Perpustakaan dan saya setuju. Jadi, mari kita lihat bagaimana Perpustakaan 'router' kami akan bekerja dalam tindakan:

Router.addRoute('/home', 'homeTemplate');
Router.addRoute('/user/:username', 'profileTemplate');
Router.addRoute('/contact', 'contactTemplate');

Router.run();

Dalam desain, Anda memiliki konsep seperti 'bentuk berikut-fungsi', yang menggunakan gagasan untuk meletakkan segala sesuatu yang pertama, dan merancang itu kemudian.

Dalam kode, saya sering menemukan sebaliknya lebih bermanfaat. Kita sebagai pengembang, dapat bekerja dalam berbagai arah dan memiliki contoh apa yang harus desain seperti, membuat kita terfokus dan efisien.

Sekarang bahwa saya tahu apa yang ingin saya lakukan, itu adalah hanya masalah mengimplementasikannya. Jadi, mari kita melihat ciri yang kita menulis di atas; Kami ingin dapat menambahkan rute, dan memiliki Meteor yang membuat template yang diberikan parsial. Tentu saja, Meteor di pemandangan bekerja dari stang 's template secara default, sehingga saya telah membuat keputusan untuk membuat ini denominasi router kami.

Rincian

Selanjutnya, mari kita memecah proyek ke bagian yang berbeda sehingga kami tahu fitur apa yang kita butuhkan untuk bekerja pada.

Kita akan mulai dengan mendapatkan URI dari halaman saat ini, seperti yang kita perlu untuk mencocokkan rute terhadap sesuatu. Ini dapat dilakukan, cukup, mudah menggunakan variabel window.location.pathname, disediakan oleh browser.
Selanjutnya, kita perlu kemampuan untuk menambahkan rute. Ini juga, cukup sederhana sekarang bahwa kita telah melakukan beberapa contoh kode; kita akan memiliki fungsi bernama addRoute yang akan menerima pola rute dan nama template. Fungsi ini akan memiliki untuk menyimpan semua benda-benda rute ini dalam beberapa jenis array.
Dengan URI saat ini dan sebuah array dari rute yang disimpan, kita akan membutuhkan beberapa jenis metode untuk melihat jika mereka cocok.
Dan terakhir, tetapi tidak sedikit, kita perlu mengambil rute yang cocok dan menampilkan template yang terpasang.

Mudah-mudahan, Anda dapat melihat bahwa dengan meletakkan persyaratan, itu benar-benar membantu untuk merampingkan tahap perencanaan. Sekarang kita siap untuk melompat.

Menyiapkan

Untuk memulai, mari kita membuat sebuah proyek Meteor yang baru, aku akan nama tambang 'routerdemo'. Sekarang, kita akan membuat folder bernama 'lib' di dalam folder lain bernama 'klien':

1	meteor create routerdemo
2	cd routerdemo
3	mkdir -p client/lib

Berikutnya, buat file bernama 'router.js' di dalam folder baru dibuat lib. Alasan kami yang mencuat di 'klien', adalah karena server tidak memiliki akses ke variabel window.location.pathname dan dengan demikian, tidak akan bekerja dengan router kami. Meletakkan barang di dalam folder bernama 'klien' meyakinkan mereka akan hanya berjalan di sisi klien.

Sekarang di dalam router.js file Anda hanya membuat, mari kita menempatkan dalam perancah beberapa:

//////////////////////////
// Router
//////////////////////////

Router = {
  uri: /*Current URL*/,
	routes: [],
	
	addRoute: /* function to add a route */,
	getMatchingRoute: /* function to get matching route */,
	run: /* function to display the matched route's template */
};

Saya pikir itu adalah sebuah perancah cukup baik, aku bahkan diisi dalam kode untuk array rute, dan menambahkan beberapa komentar (kemajuan!). Sekarang untuk lebih mengembangkan perpustakaan kami, kita perlu untuk mendiskusikan bagaimana kami akan mencocokkan rute ini bersama-sama.

Pencocokan rute

Hal ini tidak sesederhana seperti currentRoute === rute, seperti yang kita hadapi dengan dinamis penampung. Kami ingin rute untuk ' / pengguna /: id' untuk mencocokkan URI dari ' / pengguna/42 ' dan seterusnya.

Untuk melakukan ini, kita akan harus berpisah URI dan melakukan sedikit lebih analisis mendalam. Sekarang beberapa orang mungkin berpikir untuk menggunakan regex, tapi, itu adalah sedikit di atas jika kau bertanya padaku. Banyak pendekatan yang lebih sederhana akan berpisah segmen dan pastikan dua rute memiliki jumlah segmen yang sama, dan juga memastikan bahwa bagian dari rute yang tidak pengganti, cocok.

Ini dapat dengan mudah dicapai dengan pemisahan URI mana pun ada sebuah slash ('/'), menggunakan metode .split. Jadi cek pertama kami akan memastikan bahwa dua rute memiliki jumlah segmen yang sama.

Jika rute ' / pengguna /: id' dan kita mendapatkan URI dari '/ profil/42/foo/bar', kita bahkan tidak perlu untuk melakukan memeriksa lebih lanjut, yang memiliki dua segmen dan yang lain memiliki empat, sehingga yang tampaknya seperti cek primer yang baik. Hal berikutnya yang bisa kita lakukan adalah filter melalui daftar dan memastikan bahwa setiap bagian yang bukan pengganti cocok. Jika pemeriksaan dua benar, kita tahu rute cocok.

Mengeset variabel URI

Jadi mari kita mulai dengan mengeset variabel uri:

1	uri: _.compact(window.location.pathname.split("/")),

Pada kode diatas, kita membelah array pada garis miring maju, dan mengubah string ke dalam sebuah array dari segmen. Kemudian kita menggunakan Underscore's kompak fungsi untuk menghapus item kosong dari daftar, ini bisa disebabkan oleh miring pada awal atau oleh seseorang menggunakan dua garis miring maju oleh kesalahan. Dengan melakukan ini, itu membuat sistem kami jauh lebih pemaaf.

Menambahkan rute

Selanjutnya, kita perlu membuat fungsi untuk menambahkan rute, ini adalah proses yang cukup mirip, tapi karena kami akan menjadi pengganti cocok kemudian, kita akan menyimpan bukan hanya segmen dan nama template, tetapi indeks untuk pengganti juga.

Berikut adalah fungsi selesai:

addRoute: function(route, template) {
	var segments =  _.compact(route.split("/"));
	
	var placeholders = _.reduce(segments, function(currentArr, piece, index) {
		if (piece.substr(0, 1) === ":") {
			currentArr.push(index);
			segments[index] = piece.substr(1);
		}
		return currentArr;
	}, []);
	
	this.routes.push({
		route: segments,
		template: template,
		placeholderIndexes: placeholders
	});
},

Kita mulai dengan pemecahan rute ke segmen, sama seperti kita lakukan untuk URI, tapi kali ini kita juga perlu untuk menyimpan indeks pengganti untuk masa depan referensi, menggunakan Underscore's mengurangi metode.

Untuk menyadari, mengurangi fungsi ini mirip dengan setiap metode, juga siklus melalui semua elemen dari daftar, perbedaan ini, melewati apa pun setiap iterasi kembali ke item berikutnya, akhirnya kembali hasilnya ke variabel tertentu. Kita mulai dengan array kosong (parameter ke-3) dan kita menambahkan setiap indeks mereka dan melewati array itu sepanjang sampai akhirnya, itu kembali kembali ke pengganti variabel.

Hal berikutnya yang Anda akan melihat yang terjadi di sini, adalah bahwa kita mengubah nama segmen yang pengganti dan menghapus usus besar. Kita melakukan ini semata-mata untuk alasan estetika dan kemudian itu akan membuatnya lebih mudah untuk referensi dalam template.

Akhirnya, kami mendorong data baru untuk array rute kita, yang kita buat sebelumnya.

Pencocokan rute ke URI

Langkah berikutnya adalah untuk menyaring melalui daftar dan mencari rute yang cocok dengan URI saat ini.

Berikut adalah fungsi lengkap:

getMatchingRoute: function(){
     for (var i in this.routes) {
         var route = this.routes[i];
         var data = {};

         if (route.segments.length === this.uri.length) {
             var match = _.every(route.segments, function(seg, i){
                  if (_.contains(route.placeholderIndexes, i)) {
                       data[seg] = this.uri[i];
                       return true;
                  } else {
                       return seg === this.uri[i];
                  }
             }, this);

             if (match) {
                  return {
                      data: data,
                      template: route.template
                  }
             }
        }
    }
    //no matches (add 404 or default template maybe?)
    return false;
},

Kami melakukan beberapa hal di sini, jadi mari kita berjalan melalui itu. Kita mulai dengan Bersepeda melalui array rute, dan kami menetapkan rute saat ini untuk sebuah variabel, bersama dengan objek data kosong untuk menyimpan pengganti.

Selanjutnya, kita lakukan cek awal untuk memastikan dua rute memiliki jumlah segmen yang sama, jika tidak, kami hanya siklus pada rute berikutnya. Jika mereka memiliki jumlah yang sama komponen, kita harus memeriksa apakah segmen cocok, ini dapat dilakukan menggunakan Underscore's '_.every' fungsi. Fungsi ini sekali lagi seperti '_.each' metode, kecuali bahwa itu kembali boolean. Cara kerjanya adalah itu akan menjalankan fungsi untuk setiap item dalam array, jika mereka semua kembali benar, akan mengembalikan fungsi benar, jika tidak akan kembali palsu, sehingga cocok untuk melakukan hal-hal seperti ini di mana kita perlu memverifikasi setiap segmen.

Sekarang cek yang kita melakukan cukup mudah, jika pengganti, maka secara otomatis cocok, sebagai pengganti dapat sama dengan nilai apapun. Jika tidak pengganti, kami pastikan segmen kedua cocok, cukup sederhana.

Untuk memeriksa apakah atau tidak ini adalah pengganti, kami melewati indeks segmen saat ini (disimpan di 'i') untuk menekankan 's _.contains fungsi, yang akan memeriksa nilai.

Sekarang Anda mungkin bertanya-tanya apa baris pertama di dalam pernyataan ini 'Kalau' lakukan, Yah, itu adalah menyimpan segmen dalam array data di bawah nama diberikan pengganti. Jadi, katakanlah misalnya Anda memiliki rute ' / pengguna /: nama ' dan URI saat ini adalah '/ pengguna/bob', maka baris ini akan menambahkan sebuah properti ke objek data bernama 'nama' dan menyebarkannya nilai Bob.

Sisanya cukup jelas, kami melewati true atau false, tergantung pada keadaan, dan hasilnya akan disimpan dalam 'cocok'. Jika cocok benar, kita kembali data bersama dengan nama template, dan jika ada tidak cocok, kita kembali palsu. Dan that's it untuk metode getMatchingRoute kami.

Sejauh ini, kita bisa mendapatkan URI saat ini, kita dapat menambahkan rute, dan kita dapat menemukan rute pencocokan, satu-satunya yang tersisa adalah untuk menampilkan rute yang benar, dan untuk ini kita perlu menulis 'menjalankan' metode.

Menampilkan Template

Meteor menggunakan setang untuk template dan menyimpan semua template dalam variabel, tepat bernama, 'Template'. Sekarang, jika Anda sudah familiar dengan setang maka Anda tahu template ini adalah fungsi-fungsi hanya, dan dengan memanggil mereka (opsional lewat di beberapa data) kami kembali template HTML.

Sekarang, memanggil fungsi-fungsi ini untuk mendapatkan template HTML akan bekerja dengan baik, tetapi tidak sangat Meteor-seperti, seperti apa yang kita akan berakhir dengan hanya statis situs normal. Untungnya, menambahkan dalam perilaku dinamis lebih mudah daripada yang Anda mungkin berpikir, semua yang perlu kita lakukan adalah membungkus fungsi panggilan di 'Meteor.render' panggilan. Memasukkannya ke dalam fungsi ini akan membuat bereaksi terhadap perubahan dalam data dan menyimpannya 'hidup'.

Menjalankan metode

Karena ini, menjalankan router sangat sederhana, mari kita membuat menjalankan metode:

run: function(){
    var route = this.getMatchingRoute();
    if (route) {
        var fragment = Meteor.render(function() {
            if (Template[route.template] !== undefined) {
                 return Template[route.template](route.data);
            }
        });

        document.body.appendChild(fragment);
    } else {
        //404
    }
}

Kita mulai dengan mendapatkan cocok rute, menggunakan fungsi getMatchingRoute yang kami hanya menulis, kami kemudian pastikan ada pertandingan, dan akhirnya kami menggunakan pernyataan lain untuk menangani menampilkan 404.

Di dalam jika pernyataan, kita sebut Meteor.render dan di dalam, kita periksa dan memanggil kembali template, lewat dengan data dari pengganti. Fungsi ini akan mengembalikan fragmen HTML, yang kita dapat kemudian hanya menambahkan ke dokumen tubuh.

Jadi, dengan sekitar 60 baris kode, kami telah menyelesaikan router kami.

Pengujian itu

Langkah berikutnya adalah untuk menguji itu. Aku akan menggunakan kode yang sama yang kita menulis sebelumnya ketika kami merencanakan proyek ini, karena akan menjadi ukuran yang baik apakah kami capai, apa yang kita ingin capai. Mari kita menambahkan sebuah file bernama main.js di dalam folder klien dan menambahkan berikut:

Meteor.startup(function(){
    Router.addRoute('/home', 'homeTemplate');
    Router.addRoute('/user/:username', 'profileTemplate');
    Router.addRoute('/contact', 'contactTemplate');

    Router.run();
});

Pada kode diatas, kita perlu memastikan bahwa kita template dan tubuh akan tersedia sebelum kita mencoba bekerja dengan Router kami pertama. Kita melakukan ini dengan membungkus semua kode kami dalam pemanggilan metode Meteor.startup. Ini akan memastikan semuanya sudah siap, dan dalam metode startup, kita kemudian dapat menambahkan rute kami dan menjalankan router.

Membuat template kami

Sekarang mari kita membuat beberapa template, ini dapat dilakukan di mana saja, Anda dapat membuat subfolder dalam folder klien bernama template dan menciptakan sebuah file HTML yang terpisah untuk masing-masing, tapi karena ini akan menjadi pendek template dan hanya untuk contoh tujuan, saya akan menempatkan mereka tog Eter di dalam sebuah file bernama 'templates.html' di dalam folder 'klien':

<template name="homeTemplate">
    <h1>This is the Home Page</h1>
</template>

<template name="profileTemplate">
    <h1>Profile Page</h1>
    <p>Welcome back {{username}}</p>
</template>

<template name="contactTemplate">
    <h1>Contact Page</h1>
    <p>Contact me on twitter at {{twitterName}}</p>
</template>

Template pertama cukup dasar, hanya berisi sedikit kode HTML untuk menuju halaman rumah. Kedua template ini sangat mirip dengan template pertama, tapi kali ini kita gunakan parameter rute username. Sekarang template terakhir juga menggunakan pengganti, tapi rute yang tidak memiliki segmen twitterName. Hal ini karena standar Meteor pengganti masih bekerja, dan bekerja reaktif.

Kembali ke dalam folder klien, mari kita membuat sebuah file yang bernama 'templates.js', untuk menyatakan pengganti kontak.

1	Template.contactTemplate.twitterName = function (){
2	Session.setDefault('twitter_name', '@gabrielmanricks');
3	return Session.get('twitter_name');
4	}

Anda bisa saja kembali string, tapi aku ingin menunjukkan bahwa segala sesuatu masih reaktif. Langkah terakhir adalah untuk menghapus standar html dan js file dari direktori root (dalam kasus saya mereka yang bernama routerdemo.html dan routerdemo.js) Dengan itu dilakukan, memulai Meteor server dan navigasi ke rute tertentu.

Mencoba pergi ke '/ home' atau ' pengguna/gmanricks' atau '/ kontak' dan mereka semua harus bekerja untuk Anda seperti yang diharapkan. Hal lain adalah, karena kami disimpan nama kericau dalam sesi, kita dapat membuka konsol browser pada halaman kontak dan masukkan:

1	Session.set('twitter_name', '@nettuts');

Dan Anda akan melihat bahwa halaman akan diperbaharui secara real time!

Ringkasan

Dalam artikel ini, kami membangun sebuah router dasar Perpustakaan, sementara masih memberikan sentuhan Meteor. Kita membahas banyak konsep inti dan sebagai itu ternyata, banyak menekankan konsep juga.

Pada akhirnya, saya berharap saya mendapat pesan bahwa ada tidak ada nyata "sihir" terjadi di sini. Ini adalah benar-benar semua tentang menerapkan apa yang Anda butuhkan, bukan apa yang Anda bisa.

Terima kasih untuk membaca, saya harap Anda telah menikmati itu. Seperti biasa, jika Anda memiliki pertanyaan Anda dapat meninggalkan mereka di bawah ini atau bertanya pada NetTuts IRC atau pada kericau saya.

Catatan: Jika Anda tertarik untuk belajar lebih banyak tentang Meteor, saya baru saja merilis buku baru saya, yang rincian proses membangun aplikasi dari konsepsi & berencana untuk mengamankan & penggelaran. Anda dapat pick-up buku dalam kedua format e-book serta Hardcover dari Amazon.