Persiapan Lingkungan
Sebelum mempelajari tulang punggung secara formal, Anda perlu menyiapkan sesuatu:
Pertama, Anda perlu mendapatkan file sumber kerangka kerja backbone: http://documentcloud.github.com/backbone/
Backbone mengandalkan metode dasar kerangka kerja bawah, jadi Anda juga perlu mengunduh file sumber dari kerangka kerja bawah: http://documentcloud.github.com/underscore/
Di Backbone, Operasi di DOM dan acara bergantung pada perpustakaan pihak ketiga (seperti JQuery atau Zepto), Anda hanya perlu memilih salah satu dari mereka untuk diunduh:
JQuery: http://jquery.com/
Zepto: http://zeptojs.com/
Sepertinya itu rumit, tetapi tujuan dari tulang punggung adalah untuk menggunakan kerangka kerja sederhana untuk membangun aplikasi yang kompleks, jadi masalahnya tidak berarti itu rumit.
Anda dapat membuat halaman HTML baru dan membawa kerangka kerja ini, seperti ini:
<type script = "text/javascript" src = "jQuery/jQuery-1.8.2.min.js"> </script> <script type = "text/javascript" src = "underscore/underscore-min.js"> </script> <script = "teks/javascript" script/script/script/script/script 'script/script/javascript ”script/script' script/script/javascript” script/script 'script/script/javascript ”
Pada titik ini, Anda siap untuk lingkungan Anda harus menjalankan tulang punggung.
Halo dunia
Mari kita bicara tentang fungsi HelloWorld ini: ada tombol laporan pada halaman, klik kotak input pop-up, masukkan konten, konfirmasi, dan konten akan ditambahkan ke halaman. Gambar halaman adalah sebagai berikut:
Mari kita lihat kode di bawah ini:
<! Doctype html> <html> <head> <title> the5fire.com-backbone.js-hello world </iteme> </head> <body> <button id = "check"> Laporan </button> <ul = "list"> </ul> <a href = "http://www.the5> </ul> <a href =" http://www.the5> src = "http://ajax.googleapis.com/ajax/libs/jQuery/1.4.4/jQuery.min.js"> </script> <script src = "http://documentcloud.github.com/underscore/underscore.js.js"> <pripser> </scripk src = "http://documentcloud.github.com/backbone/backbone-min.js"> </ptript> <script> (function ($) {world = backbone.model.extend ({// membuat objek dunia dengan nama atribut nama: null}); worlds = backbone.collection name name name: null}); worlds = backbone.collection this.bind ("add", options.view.addoneworld);}}); #check ":" checkin ", // event binding, bind elemen dengan id check in dom}, checkin: function () {var world_name = prompt (" moal i ask, bintang mana kamu? "); if (world_name ==") world_name = 'tidak diketahui'; var world = world new world ({{{{{world:}}}} world. function (model) {$ ("#World-list"). Append ("<li> Berikut adalah salam dari <b>" + model.get ('name') + "</b> Planet: Hello World! </li>");Saya pikir kodenya intuitif. Ini melibatkan tiga bagian tulang punggung, tampilan, model, dan koleksi, dan akan disebutkan nanti. Selama Anda memahaminya di sini, model mewakili model data, pengumpulan adalah kumpulan model, dan tampilan digunakan untuk memproses halaman dan logika halaman sederhana.