Router di tulang punggung bertindak sebagai fungsi perutean, mengendalikan arah URL, dan berlaku saat menggunakan tag # di URL.
Mendefinisikan router membutuhkan setidaknya satu router dan fungsi untuk memetakan URL tertentu, dan kita perlu mengingat bahwa di tulang punggung, karakter apa pun setelah tag # akan diterima dan ditafsirkan oleh router.
Mari kita tentukan router:
<script> var approUter = backbone.roouter.extend ({routes: {"*action": "defaultroute" // cocok dengan http://example.com/#anyething-here}}); // instantiate router var app_router = provrouct baru; app_router.on ('route: defaultroute', function (action) {waspada (action);}) // buka sejarah backbone backbone.history.start (); </script>Sekarang, kami telah mendefinisikan router, tetapi pada saat ini router tidak cocok dengan URL spesifik. Selanjutnya, kita akan mulai menjelaskan secara rinci bagaimana router bekerja.
Routing dinamis
Backbone memungkinkan Anda untuk mendefinisikan router dengan parameter tertentu. Misalnya, Anda mungkin ingin menerima posting melalui ID tertentu, seperti URL: "http://example.com/#/posts/12". Setelah router ini diaktifkan, Anda bisa mendapatkan posting dengan ID 12. Selanjutnya, mari kita tentukan router ini:
<script> var approUter = backbone.roTer.extend ({routes: {"Post/: id": "getPost", "*action": "defaultroute" // backbone akan cocok dengan rute sesuai pesanan}}); // instantiate router var app_router = provrouct baru; app_router.on ('route: getPost', function (id) {// Perhatikan bahwa parameter dilewatkan di sini peringatan ("Dapatkan nomor pos" + id);}); app_router.on ('route: defaultroute', function (action) {waspada (tindakan);}); // Buka Backbone's History Backbone.History.Start (); </script>Aturan yang cocok
Backbone menggunakan dua bentuk variabel untuk mengatur aturan pencocokan untuk router. Yang pertama adalah:, yang dapat mencocokkan parameter apa pun antara tebasan di URL, dan yang lainnya adalah *, yang digunakan untuk mencocokkan semua bagian di belakang tebasan. Perhatikan bahwa karena bentuk kedua memiliki ambiguitas yang lebih besar dari yang pertama, ia memiliki prioritas pencocokan terendah.
Hasil dari segala bentuk kecocokan diteruskan ke fungsi yang relevan sebagai parameter. Aturan pertama dapat mengembalikan satu atau lebih parameter, dan aturan kedua mengembalikan seluruh hasil pertandingan sebagai parameter.
Selanjutnya, mari kita gunakan contoh untuk menggambarkan:
Rute: {"Post/: ID": "GetPost", // <a href = "http://example.com/#/posts/121"> Contoh </a> "unduh/*path": "downloadfile", // <a href = "http:/xample.com/#/ownLoad/ack. "LoadView", // <a href = "http://example.com/#/dashboard/graph"> Load route/Action View </a>}, app_router.on ('rute: getPost', function (id) {wute (id); // setelah pencocokan, parameter yang disahkan adalah 12}); {iD) (id); // Setelah mencocokkan, seluruh hasil pencocokan dikembalikan sebagai parameter, jalurnya adalah pengguna/gambar/hey.gif}); app_router.on ('rute: loadView', fungsi (rute, tindakan) {waspada (rute + "_" + tindakan); // Setelah pencocokan, dua parameter dilewati, dashboard_graph akan pop up};Anda mungkin sering mendengar kata "router", tetapi sering mengacu pada perangkat jaringan yang merupakan navigasi dan hub untuk koneksi jaringan, transmisi data. Fungsi "router" di tulang punggung mirip dengan itu. Seperti yang dapat Anda lihat dari contoh di atas, ia dapat menavigasi jangkar URL yang berbeda ke metode tindakan yang sesuai.
(Mekanisme ini juga disediakan dalam banyak kerangka kerja web sisi server, tetapi Backbone.Router lebih fokus pada navigasi aplikasi halaman tunggal front-end.)
Navigasi perutean backbone dilakukan oleh dua kelas backbone.Router dan backbone.history:
Kami umumnya tidak membuat sejarah secara langsung, karena ketika kami membuat instance router untuk pertama kalinya, kami akan secara otomatis membuat objek sejarah singleton, yang dapat Anda akses melalui backbone.history.
Untuk menggunakan fungsi routing, pertama -tama kita perlu mendefinisikan kelas router untuk menyatakan aturan URL dan tindakan yang perlu didengarkan. Dalam contoh sekarang, kami mendefinisikan daftar URL yang akan didengarkan melalui atribut rute saat mendefinisikan, di mana kunci mewakili aturan dan nilai URL mewakili metode tindakan yang dijalankan ketika URL dalam aturan ini.
Aturan hash
Aturan URL mewakili fragmen hash (titik jangkar) di URL saat ini. Selain dapat menentukan string umum dalam aturan, kita juga perlu memperhatikan dua aturan dinamis khusus:
String yang dipisahkan oleh / (slash) dalam aturan akan dikonversi menjadi ekspresi ([^//]+) dalam kelas router, mewakili beberapa karakter yang dimulai dengan / (slash). Jika: (usus besar) diatur dalam aturan ini, itu berarti bahwa string dalam URL ini akan diteruskan untuk bertindak sebagai parameter.
Misalnya, kami mengatur topik aturan/: ID. Ketika titik jangkar adalah #Topic/1023, 1023 akan diteruskan ke tindakan sebagai ID parameter. Nama parameter (: id) dalam aturan umumnya akan sama dengan nama parameter formal dari metode tindakan. Meskipun router tidak memiliki batasan seperti itu, lebih mudah untuk dipahami menggunakan nama parameter yang sama.
* (tanda bintang) dalam aturan dikonversi menjadi ekspresi (.*?) Di dalam router, mewakili nol atau lebih karakter sewenang -wenang. Dibandingkan dengan aturan: (usus besar), * (tanda bintang) tidak memiliki batasan pemisahan / (slash), seperti aturan * kesalahan yang kami tentukan dalam contoh di atas.
Aturan * (tanda bintang) dalam router menggunakan pola non-greedy setelah dikonversi menjadi ekspresi reguler, sehingga Anda dapat menggunakan aturan kombinasi seperti ini: * Type/: ID, yang dapat cocok dengan #panas/1023, dan akan berlalu panas dan 1023 sebagai parameter ke metode tindakan.
Di atas memperkenalkan bagaimana aturan didefinisikan. Aturan -aturan ini akan sesuai dengan nama metode tindakan, yang harus dalam objek router.
Setelah mendefinisikan kelas router, kita perlu membuat instantiate objek router dan memanggil metode start () dari objek sejarah, yang akan mulai mendengarkan URL. Di dalam objek sejarah, acara OnHashChange akan digunakan untuk mendengarkan perubahan URL ke hash (Anchor Point). Untuk browser yang tidak mendukung acara OnHashChange (seperti IE6), sejarah akan mendengarkan detak jantung setInterval.
aturan pushstate
Backbone.History juga mendukung URL pushstate. PushState adalah fitur baru yang disediakan oleh HTML5. Ini dapat mengoperasikan URL dari browser saat ini (bukan hanya mengubah titik jangkar), dan tidak akan menyebabkan refresh halaman, membuat aplikasi satu halaman lebih seperti proses yang lengkap.
Untuk menggunakan fitur PushState, Anda harus terlebih dahulu memahami beberapa metode dan peristiwa yang disediakan oleh HTML5 untuk fitur ini (metode ini didefinisikan di jendela. Objek sejarah):
1.PushState (): Metode ini dapat menambahkan entitas sejarah baru ke sejarah browser ke URL yang ditentukan.
2. ReplaceState (): Metode ini dapat menggantikan entitas sejarah saat ini dengan URL yang ditentukan
Memanggil metode pushstate () dan penggantian () hanya untuk mengganti URL halaman saat ini, dan itu tidak akan benar -benar masuk ke alamat URL ini (saat menggunakan tombol belakang atau maju, itu tidak akan melompat ke URL). Kita dapat mendengarkan perubahan URL yang disebabkan oleh dua metode ini melalui acara Onpopstate.
Metode Routing Terkait
1.Route () Metode
Setelah mengatur aturan perutean, jika diperlukan penyesuaian dinamis, Anda dapat menghubungi metode router.route () untuk secara dinamis menambahkan aturan perutean dan metode tindakan, misalnya:
router.route ('topik/: pageno/: pagesize', 'page', function (pageno, pagesize) {// todo}); Saat kita memanggil metode rute (), aturan yang diberikan tidak hanya string, tetapi juga ekspresi reguler: router.route (/^topic /(.*?)/(.*?)$/, 'page', function (pageno, pageSize) {// todo});2. Navigasi () Metode
Dalam contoh sebelumnya, aturan URL dipicu oleh input manual kami. Dalam aplikasi yang sebenarnya, kadang -kadang mungkin perlu untuk melompat secara manual dan navigasi, dan Anda dapat menyebutnya
Metode router.navigate () digunakan untuk kontrol, misalnya: router.navigate ('topic/1000', {trigger: true});Kode ini mengubah URL ke http: //localhost/index.html#topic/1000 dan memicu metode renderDetail. Perlu dicatat bahwa kita lulus dalam konfigurasi pemicu di parameter kedua, yang digunakan untuk menunjukkan apakah metode tindakan yang sesuai dipicu saat mengubah URL.
3. Metode stop ()
Ingat kami mulai rute mendengarkan melalui metode backbone.history.start (). Anda juga dapat menghubungi metode backbone.history.stop () kapan saja untuk berhenti mendengarkan, misalnya:
router.route ('topik/: pageno/: pagesize', 'page', function (pageno, pagesize) {backbone.history.stop ();});Jalankan kode ini dan akses URL: http: //localhost/index.html#topic/5/20. Anda akan menemukan bahwa setelah tindakan ini dieksekusi, mendengarkan tidak akan berlaku lagi.