การเตรียมสิ่งแวดล้อม
ก่อนที่จะศึกษากระดูกสันหลังอย่างเป็นทางการคุณต้องเตรียมบางสิ่งบางอย่าง:
ก่อนอื่นคุณต้องได้รับไฟล์แหล่งที่มาของ Backbone Framework: http://documentcloud.github.com/backbone/
Backbone ขึ้นอยู่กับวิธีพื้นฐานของเฟรมเวิร์กขีดเส้นใต้ดังนั้นคุณต้องดาวน์โหลดไฟล์ต้นฉบับของ Framework Underscore: http://documentcloud.github.com/underscore/
ใน Backbone การดำเนินงานเกี่ยวกับ DOM และกิจกรรมขึ้นอยู่กับห้องสมุดบุคคลที่สาม (เช่น JQuery หรือ Zepto) คุณจะต้องเลือกหนึ่งในนั้นเพื่อดาวน์โหลด:
jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
ดูเหมือนว่ามันจะยุ่งยาก แต่จุดประสงค์ของกระดูกสันหลังคือการใช้เฟรมเวิร์กง่าย ๆ เพื่อสร้างแอปพลิเคชันที่ซับซ้อนดังนั้นปัญหาจึงไม่ได้หมายความว่ามันซับซ้อน
คุณสามารถสร้างหน้า HTML ใหม่และนำกรอบเหล่านี้มาเช่นนี้:
<script type = "text/javascript" src = "jQuery/jQuery-1.8.2.min.js"> </script> <script type = "text/javascript" src = "underscore/underscore-min.js"> </script> <script type = "text/javascript
ณ จุดนี้คุณพร้อมสำหรับสภาพแวดล้อมที่คุณต้องใช้กระดูกสันหลัง
สวัสดีโลก
ก่อนอื่นให้พูดคุยเกี่ยวกับฟังก์ชั่นของ HelloWorld นี้: มีปุ่มรายงานในหน้าคลิกกล่องอินพุตป๊อปอัพป้อนเนื้อหายืนยันและเนื้อหาจะถูกเพิ่มลงในหน้า ภาพหน้ามีดังนี้:
มาดูรหัสด้านล่าง:
<! doctype html> <html> <head> <title> the5fire.com-backbone.js-hello World </title> </head> <body> <button id = "ตรวจสอบ"> รายงาน </button> <ul id = "WorldList" ></ul> src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script> <script src = "http://documentcloud.github.com/underscore/underscore src = "http://documentcloud.github.com/backbone/backbone-min.js"> </script> <script> (ฟังก์ชั่น ($) {world = backbone.model.extend ({// สร้างวัตถุโลกที่มีชื่อแอตทริบิวต์ชื่อ: null}; {this.bind ("เพิ่ม", optures.view.addoneworld);}}); "คลิก #CHECK": "Checkin", // การผูกมัดเหตุการณ์, ผูกองค์ประกอบด้วยการตรวจสอบ ID ใน DOM}, checkin: function () {var world_name = promple ("ฉันขอถามว่าคุณเป็นดาวไหน?"); ฟังก์ชั่น (โมเดล) {$ ("#-list") ผนวก ("<li> นี่คือคำทักทายจาก <b>" + model.get ('ชื่อ') + "</b> planet: Hello World! </li>");ฉันคิดว่ารหัสนั้นใช้งานง่าย มันเกี่ยวข้องกับสามส่วนของกระดูกสันหลังมุมมองรูปแบบและคอลเลกชันและจะถูกกล่าวถึงในภายหลัง ตราบใดที่คุณเข้าใจที่นี่โมเดลแสดงถึงรูปแบบข้อมูลคอลเลกชันเป็นคอลเลกชันของรุ่นและมุมมองที่ใช้ในการประมวลผลหน้าและตรรกะหน้าง่าย