เนื้อหา
- มาเริ่มกันเลย
- รุ่นแรกของเรา
- คอลเลกชันของภาพ
- FlickrBombImage
- เลเยอร์มุมมอง
- FlickrBombImageView
- การยืดบ้าน
- ใช้งานได้ดีกับเว็บแอปขนาดใหญ่เช่นกัน
- แหล่งข้อมูลเพิ่มเติม
หากคุณต้องการสร้างเครื่องมือ JavaScript ขนาดเล็กอย่างรวดเร็วคุณอาจไม่คิดที่จะใช้เฟรมเวิร์ก แฮ็คโค้ด jQuery ได้ง่ายขึ้นแทนที่จะติดตั้งและเรียนรู้กรอบงานใหม่ใช่ไหม? ผิด Backbone.js เป็นเฟรมเวิร์กกาวที่มีน้ำหนักเบาเป็นพิเศษซึ่งดูเหมือน JavaScript แบบเก่าทั่วไปที่คุณใช้ในการเขียน
เราสร้างต้นแบบคงที่จำนวนมากที่ ZURB เพราะเราชอบที่จะสามารถคลิกผ่านหน้าต่างๆได้โดยไม่ต้องเขียนโค้ดแบ็กเอนด์ใด ๆ บ่อยครั้งที่เราใส่ภาพตัวยึดสีเทาที่ดูจืดชืดลงหรือบางครั้งเราก็ไปค้นหาภาพตัวอย่างจาก Flickr เพื่อช่วยให้เราเห็นภาพสิ่งที่อาจเกิดขึ้นในร่างสุดท้าย จนถึงวันศุกร์มหัศจรรย์วันหนึ่งเมื่อเราตัดสินใจว่าการเขียน JavaScript เพื่อแก้ปัญหาของเราจะดีมาก เราต้องการที่จะสามารถค้นหาและเลือกรูปภาพบน Flickr ได้โดยตรงจากภาพตัวยึดด้วยตัวเอง เราจะเรียกมันว่า FlickrBomb และนี่คือเรื่องราวของการสร้างโดยใช้ Backbone.js
ขอแนะนำอย่างยิ่งให้คุณดู FlickrBomb อย่างรวดเร็วก่อนอ่าน เป็นหนึ่งในดีลประเภท "การคลิกมีมูลค่าพันคำ" เอาเลยเราจะรอ
ทุกวันนี้มีเฟรมเวิร์ก JavaScript อยู่มากมาย SproutCore, JavaScriptMVC, Spine, Sammy, Knockout แต่เราชอบ Backbone.js สำหรับโปรเจ็กต์นี้ด้วยเหตุผลบางประการ:
1. มีน้ำหนักเบา (ปราศจากไขมัน 100%)
- น้ำหนักโดยรุ่นล่าสุดที่บรรจุอยู่ที่ประมาณ 4.6kb
- ในโค้ดเป็นโค้ดมากกว่า 1,000 บรรทัดจึงไม่ยากเลยที่จะติดตามสแต็กติดตามลงไปในภายในโดยไม่ต้องเสียสติ
2. ดูเหมือนจาวาสคริปต์
- เพราะมันคือ JavaScript แค่นั้นเองและนั่นคือทั้งหมด
- มันใช้ jQuery ซึ่งแม้แต่คุณยายของคุณก็รู้จักในทุกวันนี้
3. ความคงทนที่เรียบง่ายสุด ๆ
- นอกกรอบข้อมูลจะยังคงอยู่ในแบ็กเอนด์ (ผ่าน REST) แต่การทิ้งปลั๊กอินตัวเดียวจะบันทึกลงในที่จัดเก็บในตัวเครื่องแทน
- เนื่องจากมันแยก API การคงอยู่ออกไปเราจึงสามารถให้มันคงอยู่กับแบ็กเอนด์ REST ได้โดยเพียงแค่ลบปลั๊กอินที่เก็บข้อมูลในเครื่อง
มาเริ่มกันเลย
เนื่องจาก Backbone.js เป็นเพียง JavaScript สิ่งที่เราต้องทำก็คือรวมไว้พร้อมกับ Underscore.js ในหน้า jQuery ไม่ใช่การพึ่งพาที่ยากสำหรับ Backbone per se แต่เรากำลังจะใช้มันดังนั้นเราจะรวมไว้ที่นี่ นอกจากนี้เราจะเชื่อมโยงปลั๊กอินพื้นที่เก็บข้อมูลในเครื่องเนื่องจากเราไม่ต้องการยุ่งยากกับการตั้งค่าแบ็กเอนด์ โปรดทราบว่าการเชื่อมโยงไฟล์โดยตรงที่นี่เพื่อความเรียบง่าย แต่คุณควรโฮสต์เนื้อหาของคุณเองในการใช้งานจริงเสมอ
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>
รหัสต่อไปนี้ทั้งหมดในบทความนี้เป็นรหัสเฉพาะสำหรับแอปพลิเคชันของเราดังนั้นเราจึงสามารถรวมไว้ในไฟล์ app.js หรือใส่ไว้ในบรรทัดก็ได้หากนั่นคือสิ่งที่คุณต้องการ อย่าลืมใส่ไว้หลัง Backbone Backbone ช่วยให้แอปพลิเคชันของเราเป็นนามธรรมทำให้ทั้งสองส่วนเป็นโมดูลาร์เพื่อการใช้ซ้ำได้ง่ายและผู้อื่นสามารถอ่านได้มากขึ้น เพื่อแสดงให้เห็นถึงสิ่งที่เป็นนามธรรมได้ดีที่สุดเราจะอธิบายการออกแบบของ FlickrBomb จากล่างขึ้นบนโดยเริ่มจากแบบจำลองและลงท้ายด้วยมุมมอง
รุ่นแรกของเรา
งานแรกที่จะจัดการคือการดึงรูปภาพจาก Flickr การสร้างแบบจำลอง FlickrImage ในกระดูกสันหลังนั้นง่ายพอเราจะสร้างโมเดลใหม่ชื่อ FlickrImage และเพิ่มวิธีการบางอย่างเพื่อช่วยให้เราได้ขนาดนิ้วหัวแม่มือที่มีขนาดแตกต่างกัน
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 บนตัวพิมพ์ใหญ่ด้านที่ยาวที่สุด 'ใหญ่ ': size_code =' _b '; break; // 1024 ในด้านที่ยาวที่สุดเริ่มต้น: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('เซิร์ฟเวอร์') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
โมเดลใน Backbone เป็นอ็อบเจ็กต์ที่สามารถคงอยู่ได้และมีฟังก์ชันบางอย่างที่เกี่ยวข้องเช่นเดียวกับโมเดลในเฟรมเวิร์ก MVC อื่น ๆ ส่วนที่น่าอัศจรรย์ของแบบจำลอง Backbone คือเราสามารถเชื่อมโยงเหตุการณ์เข้ากับแอตทริบิวต์ดังนั้นเมื่อแอตทริบิวต์นั้นเปลี่ยนแปลงเราสามารถอัปเดตมุมมองของเราเพื่อแสดงถึงสิ่งนั้นได้ แต่เรากำลังนำหน้าตัวเองเล็กน้อย
เมื่อเราดึงรูปภาพจาก Flickr เราจะได้รับข้อมูลเพียงพอที่จะสร้าง URL สำหรับทุกขนาด อย่างไรก็ตามแอสเซมบลีนั้นขึ้นอยู่กับเราดังนั้นเราจึงใช้ฟังก์ชัน. image_url () ที่รับพารามิเตอร์ขนาดและส่งคืนลิงก์สาธารณะ เนื่องจากเป็นแบบจำลองกระดูกสันหลังเราจึงสามารถใช้ this.get () เพื่อเข้าถึงแอตทริบิวต์บนโมเดลได้ ดังนั้นด้วยโมเดลนี้เราสามารถทำสิ่งต่อไปนี้ที่อื่นในโค้ดเพื่อรับ URL ของรูปภาพ Flickr
flickrImage.image_url ("ใหญ่")
ค่อนข้างกระชับใช่มั้ย? เนื่องจากโมเดลนี้เป็นแบบเฉพาะสำหรับแอปพลิเคชันของเราเราจึงเพิ่มฟังก์ชัน Wrapper สำหรับขนาดภาพเต็มและขนาดหัวแม่มือ
คอลเลกชันของภาพ
FlickrBomb เกี่ยวข้องกับคอลเล็กชันภาพไม่ใช่ภาพเดียวและ Backbone มีวิธีที่สะดวกในการสร้างแบบจำลองนี้ Collection ชื่อ aptly คือสิ่งที่เราจะใช้เพื่อจัดกลุ่มภาพ Flickr เข้าด้วยกันสำหรับตัวยึดตำแหน่งเดียว
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, page: 1, fetch: function (keywords, success) {var self = this; success = success || $ .noop; this.keywords = keywords || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', tags: this.keywords, per_page: 9, page: this.page, license: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', success: function (response) {self.add (response .photos.photo); success ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
มีสองสิ่งที่ควรทราบที่นี่ ก่อนอื่น แบบ แอตทริบิวต์บอกคอลเลกชันประเภทของโมเดลที่กำลังรวบรวม นอกจากนี้เรายังมีคุณลักษณะบางอย่างที่เราเริ่มต้นเพื่อใช้ในภายหลัง: คีย์คือคีย์ Flickr API ของเราคุณจะต้องแทนที่ flickrbombAPIkey ด้วยสตริงของคีย์ Flickr API ของคุณเอง การรับคีย์ Flickr API นั้นฟรีและง่ายดายเพียงไปที่ลิงค์นี้: www.flickr.com/services/api/misc.api_keys.html แอตทริบิวต์ของเพจคือหน้าปัจจุบันของภาพถ่าย Flickr ที่เราเปิดอยู่
วิธีการใหญ่ในที่นี้คือ. ดึงข้อมูล () ซึ่งแยกรายละเอียดของการดึงรูปภาพจาก Flickr API เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับคำขอข้ามโดเมนเรากำลังใช้ JSONP ซึ่งทั้ง Flickr API และ jQuery รองรับ พารามิเตอร์อื่น ๆ ที่เราส่งไปยัง API ควรอธิบายได้ด้วยตนเอง สิ่งที่น่าสนใจเป็นพิเศษคือฟังก์ชัน Backbone ที่ถูกเรียกใช้ที่นี่ ในการเรียกกลับที่ประสบความสำเร็จเรากำลังใช้. add () ซึ่งเป็นฟังก์ชันที่รับอาร์เรย์ของแอตทริบิวต์แบบจำลองสร้างอินสแตนซ์แบบจำลองจากแอตทริบิวต์เหล่านั้นจากนั้นเพิ่มลงในคอลเล็กชัน
ฟังก์ชัน. nextPage () และ. prevPage () ก่อนอื่นให้เปลี่ยนหน้าที่เราต้องการแสดง
ใช้ฟังก์ชันการรวบรวม. remove () เพื่อลบโมเดลที่มีอยู่ทั้งหมดออกจากไฟล์
คอลเลกชันจากนั้นเรียกการดึงข้อมูลเพื่อรับรูปภาพสำหรับหน้าปัจจุบัน (ที่เราเพิ่ง
เปลี่ยนแปลง).
FlickrBombImage
กำลังดำเนินการสำรองข้อมูลเราต้องการอีกหนึ่งโมเดลเพื่อแสดงภาพตัวยึดตำแหน่งซึ่งจะประกอบด้วยคอลเล็กชัน FlickrImages และ FlickrImage ปัจจุบันที่ถูกเลือก เราจะเรียกโมเดลนี้ว่า FlickrBombImage
var localStorage = (supports_local_storage ())? ร้านค้าใหม่ ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = FlickrImages ใหม่ (); this.flickrImages.fetch (this.get ('คำหลัก'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === ไม่ได้กำหนด) {this.set ({src: this.flickrImages. ครั้งแรก (). image_url ()});}}});
เนื่องจากโมเดลนี้มีหน้าที่ติดตามรูปภาพที่เลือกในปัจจุบันระหว่างการโหลดเพจจึงจำเป็นต้องทราบว่าจะใช้ที่เก็บข้อมูลในพื้นที่ใดบรรทัดแรกจะช่วยให้มั่นใจได้ว่ามีการรองรับการจัดเก็บในเครื่องจากนั้นสร้างร้านค้าที่เราจะใช้เพื่อคงภาพที่เลือกไว้
Backbone ช่วยให้เราสามารถกำหนดฟังก์ชัน. initialize () ที่จะถูกเรียกใช้เมื่อสร้างอินสแตนซ์ของโมเดล เราใช้ฟังก์ชันนี้ใน FlickrBombImage เพื่อสร้างอินสแตนซ์ใหม่ของคอลเลกชัน FlickrImages ส่งผ่านคำสำคัญที่จะใช้สำหรับรูปภาพนี้จากนั้นดึงรูปภาพจาก Flickr
ฟังก์ชัน. loadFirstImage () ถูกส่งผ่านเป็นการเรียกกลับเพื่อเรียกใช้เมื่อโหลดรูปภาพจาก Flickr แล้ว อย่างที่คุณคาดเดาได้ฟังก์ชันนี้จะกำหนดให้รูปภาพปัจจุบันเป็นภาพแรกในคอลเล็กชันจาก Flickr จะไม่ทำเช่นนี้หากตั้งค่าภาพปัจจุบันไว้แล้ว
นอกจากนี้เราจะใช้การเรียกกลับแอตทริบิวต์ของ Backbone เพื่อเริ่มการทำงานของฟังก์ชัน. changeSrc () ของเราเมื่อแอตทริบิวต์ src ของโมเดลนี้เปลี่ยนไป การเรียกกลับทั้งหมดนี้คือ call .save () ซึ่งเป็นฟังก์ชัน Backbone model ที่คงคุณสมบัติของโมเดลไว้กับเลเยอร์ร้านค้าใด ๆ ที่ได้รับการใช้งาน (ในกรณีของเรา localstore) ด้วยวิธีนี้เมื่อใดก็ตามที่ภาพที่เลือกมีการเปลี่ยนแปลงภาพนั้นจะยังคงอยู่ทันที
เลเยอร์มุมมอง
ตอนนี้เราได้เขียนโค้ดแบ็กเอนด์ทั้งหมดแล้ว (ซึ่งก็คือแบ็กเอนด์ส่วนหน้า) แล้วเราสามารถรวบรวมมุมมองได้ มุมมองใน Backbone นั้นแตกต่างกันเล็กน้อยจากนั้นมุมมองในเฟรมเวิร์ก MVC แบบดั้งเดิมอื่น ๆ แม้ว่าโดยทั่วไปมุมมองจะเกี่ยวข้องกับการนำเสนอ แต่ Backbone View ก็มีส่วนรับผิดชอบต่อพฤติกรรมเช่นกัน นั่นหมายความว่ามุมมองของคุณไม่เพียง แต่กำหนดลักษณะบางอย่างเท่านั้น แต่ยังรวมถึงสิ่งที่ควรทำเมื่อโต้ตอบด้วย
มุมมองมักจะเชื่อมโยงกับข้อมูลบางส่วน (แต่ไม่เสมอไป) และต้องดำเนินการสามขั้นตอนเพื่อสร้างมาร์กอัปการนำเสนอจากข้อมูลดังกล่าว:
1. วัตถุ View ถูกเริ่มต้นและสร้างองค์ประกอบว่าง
2. ฟังก์ชันการแสดงผลเรียกว่าสร้างมาร์กอัปสำหรับมุมมองโดยการแทรกลงในองค์ประกอบที่สร้างขึ้นในขั้นตอนก่อนหน้า
3. องค์ประกอบติดอยู่กับ DOM
การสร้างมาร์กอัปบางอย่างอาจดูเหมือนเป็นงานจำนวนมากและเรายังไม่ถึงส่วนพฤติกรรมของมุมมอง แต่สิ่งนี้สำคัญและนี่คือเหตุผล ทุกครั้งที่คุณแก้ไของค์ประกอบที่อยู่ใน DOM คุณจะทริกเกอร์สิ่งที่เรียกว่าเบราว์เซอร์ reflow การจัดเรียงใหม่คือเบราว์เซอร์ที่คำนวณใหม่ว่าทุกสิ่งในหน้านั้นอยู่ในตำแหน่งใด การรีโฟลว์ของเบราว์เซอร์อาจไม่ดีต่อประสิทธิภาพหากถูกเรียกภายในเหตุการณ์ลากหรือปรับขนาดซึ่งจะเริ่มทำงานในช่วงเวลาสั้น ๆ แต่ที่แย่กว่านั้นคือมันดูเลอะเทอะ ด้วยการจัดการเพจที่ซับซ้อนคุณสามารถเห็นองค์ประกอบที่ถูกเพิ่มลงในเพจและการเปลี่ยนตำแหน่งองค์ประกอบที่มีผล ตามรูปแบบการเริ่มต้นการแสดงผลและการแนบของ Backbone คุณรับประกันได้ว่าจะมีการจัดเรียงใหม่เพียงครั้งเดียวและการเปลี่ยนแปลงในเพจจะเกิดขึ้นทันทีโดยไม่คำนึงถึงความซับซ้อนของการจัดการองค์ประกอบ
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), initialize: function (ตัวเลือก) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); this. $ el = $ (this.el); this.image = ใหม่ FlickrBombImage ({คำหลัก: คำหลัก, id: ตัวเลือก. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, เหตุการณ์: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos"}, แสดงผล: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); ส่งคืนนี้;}, ... });
ฟังก์ชันของมุมมองนี้ถูกละเว้นเนื่องจากความกะทัดรัดซอร์สโค้ดทั้งหมดมีอยู่ใน GitHub: github.com/zurb/flickrbomb
ที่ด้านบนของมุมมองเรามีคุณลักษณะเฉพาะของ Backbone สองสามรายการ tagName และ className ใช้เพื่อกำหนดแท็กและคลาสที่จะนำไปใช้กับองค์ประกอบของมุมมองนี้ โปรดจำไว้ว่าขั้นตอนที่หนึ่งของการสร้างมุมมองคือการสร้างวัตถุและเนื่องจากการสร้างนั้นได้รับการจัดการโดย Backbone เราจึงจำเป็นต้องระบุองค์ประกอบและคลาส โปรดทราบว่า Backbone มีค่าเริ่มต้นที่สมเหตุสมผล หากเราละแอตทริบิวต์เหล่านี้ div จะถูกใช้โดยค่าเริ่มต้นและจะไม่มีการใช้คลาสใด ๆ เว้นแต่คุณจะระบุอย่างใดอย่างหนึ่ง
แอตทริบิวต์ template เป็นแบบแผน แต่ไม่จำเป็น เรากำลังใช้ที่นี่เพื่อระบุฟังก์ชันเทมเพลต JavaScript ที่เราจะใช้สร้างมาร์กอัปสำหรับมุมมองนี้ เราใช้ฟังก์ชัน _.template () ที่รวมอยู่ใน Underscore.js แต่คุณสามารถใช้เครื่องมือสร้างเทมเพลตที่คุณต้องการได้เราจะไม่ตัดสินคุณ
ในฟังก์ชัน .initialize () ของเราเรากำลังดึงสตริงคำหลักออกจากแท็กรูปภาพจากนั้นสร้างแบบจำลอง FlickrBombImage โดยใช้คำหลักเหล่านั้น นอกจากนี้เรายังผูกฟังก์ชัน. addImage () เพื่อให้ทำงานเมื่อมีการเพิ่ม FlickrImage ลงในคอลเลกชัน FlickrImages ฟังก์ชั่นนี้จะต่อท้าย FlickrImage ที่เพิ่มเข้ามาใหม่เข้ากับตัวเลือกรูปภาพของเรา บรรทัดสุดท้ายและสำคัญที่สุดคือการผูกฟังก์ชัน. updateSrc () ให้เริ่มทำงานเมื่อ FlickrImage ที่เลือกในปัจจุบันมีการเปลี่ยนแปลง เมื่อรูปภาพปัจจุบันมีการเปลี่ยนแปลงในโมเดลฟังก์ชันนี้จะทำงานอัปเดตแอตทริบิวต์ src ขององค์ประกอบรูปภาพและปรับขนาด CSS และครอบตัดรูปภาพให้พอดีกับขนาดรูปภาพที่ผู้ใช้ระบุ
เหตุการณ์: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
ต่อไปนี้ .initialize () เรามีส่วนพฤติกรรมของ View Backbone เป็นวิธีที่สะดวกในการผูกเหตุการณ์โดยใช้อ็อบเจกต์เหตุการณ์ อ็อบเจ็กต์เหตุการณ์ใช้เมธอด jQuery .delegate () เพื่อทำการเชื่อมโยงจริงกับองค์ประกอบ View ดังนั้นไม่ว่าคุณจะจัดการกับองค์ประกอบใดในมุมมองเหตุการณ์ที่ถูกผูกไว้ทั้งหมดของคุณจะยังคงทำงานได้ มันทำงานเหมือนกับ jQuery .live () ยกเว้นว่าแทนที่จะผูกเหตุการณ์กับทั้งเอกสารคุณสามารถผูกเหตุการณ์เหล่านั้นภายในขอบเขตขององค์ประกอบใดก็ได้ คีย์ของแต่ละรายการในอ็อบเจ็กต์เหตุการณ์ประกอบด้วยเหตุการณ์และตัวเลือกค่าระบุว่าฟังก์ชันที่ควรเชื่อมโยงกับเหตุการณ์นั้น โปรดทราบว่า. delegate () ใช้ไม่ได้กับบางเหตุการณ์เช่น submit โปรดดูเอกสาร jQuery .live () สำหรับรายการเหตุการณ์ที่รองรับทั้งหมด
แสดงผล: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); คืนนี้;}
สุดท้ายนี้เรามีฟังก์ชัน. render () ที่รับผิดชอบในการสร้างมาร์กอัปของเราและทำงานเพิ่มเติมใด ๆ ที่ไม่สามารถดำเนินการได้จนกว่าจะมีการเพิ่มมาร์กอัป View ในองค์ประกอบ View หลังจากที่เราเรนเดอร์เทมเพลตของเราแล้วเราจำเป็นต้องเรียก .fetch () บน FlickrBombImage ของเรา .fetch () เป็นฟังก์ชัน Backbone ที่รับสำเนาล่าสุดของโมเดลจากเลเยอร์การคงอยู่ หากเราเคยบันทึกโมเดลนี้มาก่อน .fetch () จะดึงข้อมูลนั้นทันที หลังจากดึงภาพแล้วเราจำเป็นต้องเรียกปรับขนาดเพื่อจัดตำแหน่งให้ถูกต้อง
การยืดบ้าน
เมื่อทุกชิ้นอยู่ในตำแหน่งสิ่งที่เราต้องทำตอนนี้คือค้นหาภาพตัวยึดบนหน้าและแทนที่ด้วยมุมมอง FlickrBombImage ที่แสดงผล
$ ("img [src ^ = 'flickr: //']") .each (ฟังก์ชัน () {var img = $ (this), flickrBombImageView = FlickrBombImageView ใหม่ ({img: img}); img.replaceWith (flickrBombImageView. แสดงผล (). el);});
จำเป็นต้องเรียกใช้สนิปเล็ก ๆ น้อย ๆ ที่ด้านล่างของหน้าหรือในเอกสารที่พร้อมเรียกกลับเพื่อให้แน่ใจว่าสามารถค้นหารูปภาพที่พักที่จะแทนที่ได้ เราใช้หลักการในการระบุ flickr: // [KEYWORD] ในแอตทริบิวต์ src ของแท็กรูปภาพเพื่อระบุว่าควรใส่รูปภาพจาก Flickr เราพบองค์ประกอบภาพที่มีแอตทริบิวต์ src ที่ตรงกันสร้าง FlickrBombImageView ใหม่จากนั้นแทนที่รูปภาพด้วยของเรา เราจับสำเนาของภาพต้นฉบับและส่งต่อไปยัง FlickrBombView ของเราเพื่อให้เราสามารถดึงตัวเลือกการกำหนดค่าเพิ่มเติมบางอย่างที่อาจระบุไว้ในองค์ประกอบได้
ผลลัพธ์สุดท้ายของการทำงานหนักทั้งหมดนั้นคือ API ที่เรียบง่ายสำหรับผู้ที่ใช้ไลบรารี พวกเขาสามารถกำหนดแท็กรูปภาพโดยใช้รูปแบบ flickr: // วางโค้ด FlickrBomb ที่ด้านล่างของหน้าและแบมพวกเขาได้รับภาพตัวยึดจาก Flickr
ใช้งานได้ดีกับเว็บแอปขนาดใหญ่เช่นกัน
เรามีเว็บแอปพลิเคชันขนาดใหญ่ที่เรียกว่า Notable ซึ่งเขียนขึ้นโดยไม่ต้องกังวลกับการสร้างเนื้อหาฝั่งไคลเอ็นต์ เมื่อเราต้องการสร้างส่วนต่างๆของแอปเทอร์โบชาร์จโดยสร้างฝั่งไคลเอนต์เนื้อหาเราเลือก Backbone เหตุผลเหมือนกัน: เราต้องการเฟรมเวิร์กที่มีน้ำหนักเบาเพื่อช่วยจัดระเบียบโค้ด แต่ไม่บังคับให้เราคิดใหม่ทั้งแอปพลิเคชัน
เราได้เปิดตัวการเปลี่ยนแปลงเมื่อต้นปีนี้ด้วยความสำเร็จและได้รับการยกย่องจาก Backbones นับตั้งแต่นั้นเป็นต้นมา
แหล่งข้อมูลเพิ่มเติม
Backbone มีอะไรมากกว่าที่ฉันกล่าวถึงในบทความนี้คือส่วน C (คอนโทรลเลอร์) ของ MVC (ตัวควบคุมมุมมองแบบจำลอง) สำหรับตัวเริ่มต้นซึ่งจริงๆแล้วเป็น R (เราเตอร์) ในเวอร์ชันล่าสุด และทั้งหมดนี้ครอบคลุมอยู่ในเอกสาร Backbone ซึ่งอ่านเช้าวันเสาร์เบา ๆ :
documentcloud.github.com/backbone/
หากคุณต้องการบทเรียนแบบดั้งเดิมมากกว่านี้ให้ตรวจสอบโค้ดที่มีการบันทึกไว้เป็นอย่างดีของแอปพลิเคชันสิ่งที่ต้องทำนี้ที่เขียนใน Backbone:
documentcloud.github.com/backbone/docs/todos.html
