ເນື້ອຫາ
- ເລີ່ມຕົ້ນແລ້ວ
- ຮູບແບບ ທຳ ອິດຂອງພວກເຮົາ
- ການລວບລວມຮູບພາບ
- The FlickrBombImage
- The View Layer
- ການ FlickrBombImageView
- ການຍືດຍຸ່ນບ້ານ
- ເຮັດວຽກໄດ້ດີກັບໂປແກຼມ ol ເວັບໃຫຍ່ເຊັ່ນກັນ
- ຊັບພະຍາກອນເພີ່ມເຕີມ
ຖ້າທ່ານ ກຳ ລັງຊອກຫາສ້າງເຄື່ອງມື JavaScript ເລັກໆ ໜ້ອຍໆ, ທ່ານອາດຈະບໍ່ຄິດກ່ຽວກັບການ ນຳ ໃຊ້ກອບ. ງ່າຍກວ່າທີ່ຈະ hack ລະຫັດ jQuery ຮ່ວມກັນຫຼາຍກ່ວາການຕິດຕັ້ງແລະຮຽນຮູ້ກອບ ໃໝ່, ແມ່ນບໍ? ຜິດ, Backbone.js ແມ່ນໂຄງຮ່າງກາວທີ່ມີນ້ ຳ ໜັກ ເບົາທີ່ຄ້າຍຄືກັບ JavaScript ເກົ່າແບບປົກກະຕິທີ່ທ່ານເຄີຍໃຊ້ໃນການຂຽນ.
ພວກເຮົາເຮັດແບບຕົ້ນແບບທີ່ສະຖິດຢູ່ທີ່ ZURB, ເພາະວ່າພວກເຮົາຢາກສາມາດກົດຜ່ານ ໜ້າ ຕ່າງໆໄດ້ໂດຍບໍ່ຕ້ອງຂຽນລະຫັດ backend ໃດໆ. ໂດຍປົກກະຕິແລ້ວ, ພວກເຮົາຈະລົງຮູບພາບບັນຈຸບ່ອນທີ່ມີສີຂີ້ເຖົ່າ drab, ຫຼືບາງຄັ້ງພວກເຮົາຈະຊອກຫາ Flickr ສຳ ລັບຮູບພາບຕົວຢ່າງເພື່ອຊ່ວຍພວກເຮົາເບິ່ງເຫັນສິ່ງທີ່ອາດຈະຢູ່ໃນຮ່າງຮ່າງສຸດທ້າຍ. ນັ້ນແມ່ນຈົນກ່ວາວັນສຸກ ໜຶ່ງ ວັນສຸກ, ເມື່ອພວກເຮົາໄດ້ຕັດສິນໃຈວ່າມັນຈະເປັນສິ່ງທີ່ ໜ້າ ຢ້ານທີ່ຈະຂຽນບາງ JavaScript ເພື່ອແກ້ໄຂບັນຫາຂອງພວກເຮົາ. ພວກເຮົາຕ້ອງການທີ່ຈະສາມາດຄົ້ນຫາແລະເລືອກຮູບພາບໃນ Flickr, ໂດຍກົງຈາກຮູບພາບຂອງສະຖານທີ່ຕົວເອງ. ພວກເຮົາຈະເອີ້ນມັນວ່າ FlickrBomb, ແລະນີ້ແມ່ນເລື່ອງຂອງວິທີທີ່ພວກເຮົາສ້າງມັນໂດຍໃຊ້ Backbone.js.
ຂໍແນະ ນຳ ໃຫ້ທ່ານພິຈາລະນາເບິ່ງ FlickrBomb ກ່ອນທີ່ຈະອ່ານ. ມັນແມ່ນ ໜຶ່ງ ໃນ ຈຳ ນວນ ຄຳ ວ່າ“ ກົດໄລ້ມີຄ່າ ໜຶ່ງ ພັນ ຄຳ” ຂອງສັນຍາ. ສືບຕໍ່ເດີນຫນ້າ, ພວກເຮົາຈະລໍຖ້າ.
ມີຫລາຍກອບກອບ JavaScript ໃນບລັອກມື້ນີ້, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. ແຕ່ພວກເຮົາມັກ Backbone.js ສຳ ລັບໂຄງການນີ້ໂດຍສະເພາະເຫດຜົນທີ່ແຕກຕ່າງກັນ:
1. ມັນເປັນຄວາມສະຫວ່າງ (ໃນຄວາມເປັນຈິງ 100% ບໍ່ມີໄຂມັນ)
- ໃນນ້ ຳ ໜັກ, ລຸ້ນລ້າສຸດແມ່ນປະມານ 4.6kb
- ໃນລະຫັດ, ເປັນພຽງແຕ່ຫຼາຍກວ່າ 1,000 ເສັ້ນຂອງລະຫັດ, ມັນບໍ່ຍາກທີ່ຈະປະຕິບັດຕາມຂັ້ນຕອນຕິດຕາມເຂົ້າໄປໃນພາຍໃນໂດຍບໍ່ມີການສູນເສຍຈິດໃຈຂອງທ່ານ
2. ມັນຄ້າຍຄືກັບ JavaScript
- ເພາະວ່າມັນແມ່ນ JavaScript, ນັ້ນແມ່ນມັນແລະນັ້ນແມ່ນທັງ ໝົດ
- ມັນໃຊ້ jQuery, ເຊິ່ງແມ່ນແຕ່ແມ່ເຖົ້າຂອງເຈົ້າຮູ້ຈັກຍຸກສະ ໄໝ ນີ້
3. ຄວາມອົດທົນງ່າຍດາຍ Super
- ອອກຈາກຫ້ອງມັນຄົງມີຂໍ້ມູນໃຫ້ກັບ backend (ຜ່ານ REST), ແຕ່ວ່າໂດຍການລຸດລົງໃນ plug-in ດຽວມັນຈະຊ່ວຍປະຢັດໃນບ່ອນເກັບຂໍ້ມູນທ້ອງຖິ່ນແທນ
- ເນື່ອງຈາກວ່າມັນບໍ່ເອົາເອກະສານ API ຄົງຄ້າງ, ພວກເຮົາສາມາດມີມັນຢູ່ກັບ backend REST ໂດຍພຽງແຕ່ເອົາ plug-in ຂອງການເກັບຂໍ້ມູນທ້ອງຖິ່ນມາ.
ເລີ່ມຕົ້ນແລ້ວ
ເນື່ອງຈາກວ່າ Backbone.js ແມ່ນພຽງແຕ່ JavaScript ເທົ່ານັ້ນ, ສິ່ງທີ່ພວກເຮົາຕ້ອງເຮັດກໍ່ຄືມັນລວມກັບ Underscore.js ໃນ ໜ້າ. jQuery ບໍ່ແມ່ນການເພິ່ງພາອາໄສຍາກ ສຳ ລັບກະດູກສັນຫຼັງ, ແຕ່ພວກເຮົາ ກຳ ລັງໃຊ້ມັນຢູ່ສະນັ້ນພວກເຮົາຈະລວມຢູ່ບ່ອນນີ້. ພວກເຮົາຍັງຈະເຊື່ອມຕໍ່ປັinກອິນໃນບ່ອນເກັບຂໍ້ມູນທ້ອງຖິ່ນ, ເພາະວ່າພວກເຮົາບໍ່ຕ້ອງການທີ່ຈະຫຍຸ້ງຍາກກັບການຕັ້ງຄ່າ backend. ໃຫ້ສັງເກດວ່າມີການເຊື່ອມໂຍງໂດຍກົງກັບເອກະສານຢູ່ບ່ອນນີ້ເພື່ອຄວາມລຽບງ່າຍ, ແຕ່ທ່ານຄວນເປັນເຈົ້າຂອງຊັບສິນຂອງທ່ານເອງໃນການຜະລິດ.
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, ຫຼືພຽງແຕ່ ໝາຍ ໃສ່ໃນກໍລະນີນັ້ນແມ່ນສິ່ງຂອງທ່ານ. ພຽງແຕ່ຈື່ທີ່ຈະລວມເອົາມັນຫຼັງຈາກກະດູກສັນຫຼັງ. ກະດູກສັນຫຼັງເຮັດໃຫ້ສ່ວນທີ່ບໍ່ມີຕົວຕົນຂອງການ ນຳ ໃຊ້ຂອງພວກເຮົາ, ເຮັດໃຫ້ມັນທັງສອງແບບງ່າຍດາຍ ສຳ ລັບການ ນຳ ໃຊ້ງ່າຍແລະສາມາດອ່ານໄດ້ ສຳ ລັບຄົນອື່ນ. ເພື່ອສະແດງຕົວຢ່າງທີ່ດີທີ່ສຸດ, ການອະທິບາຍກ່ຽວກັບການອອກແບບຂອງ FlickrBomb ຕັ້ງແຕ່ລຸ່ມຂຶ້ນມາ, ເລີ່ມຕົ້ນຈາກຕົວແບບ, ແລະສິ້ນສຸດລົງດ້ວຍມຸມມອງ.
ຮູບແບບ ທຳ ອິດຂອງພວກເຮົາ
ວຽກ ທຳ ອິດທີ່ ກຳ ລັງຈະແກ້ໄຂຄືການດຶງຮູບຈາກ Flickr. ການສ້າງແບບ ຈຳ ລອງແບບ FlickrImage ໃນກະດູກສັນຫຼັງແມ່ນງ່າຍດາຍພຽງພໍ, ພວກເຮົາຈະສ້າງແບບ ຈຳ ລອງ ໃໝ່ ທີ່ມີຊື່ວ່າ FlickrImage, ແລະເພີ່ມບາງວິທີການເພື່ອຊ່ວຍໃຫ້ພວກເຮົາມີໂປ້ຂະ ໜາດ ແຕກຕ່າງກັນ.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {ກັບຄືນ this.image_url ('ຂະ ໜາດ ກາງ');}, 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'; ແຕກ; // 640 ໃນກໍລະນີຂ້າງຍາວທີ່ສຸດ 'ໃຫຍ່ ': size_code =' _b '; break; // 1024 ໃນເບື້ອງຕົ້ນທີ່ຍາວທີ່ສຸດ: size_code =' ';} ກັບຄືນ "http: // farm" + this.get (' ຟາມ ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('ລັບ') + size_code +" .webp ";}})
ຮູບແບບໃນກະດູກສັນຫຼັງແມ່ນວັດຖຸທີ່ສາມາດຍືດຍຸ່ນໄດ້, ແລະມີບາງ ໜ້າ ທີ່ທີ່ກ່ຽວຂ້ອງກັບພວກມັນ, ຄືກັນກັບຕົວແບບໃນກອບ MVC ອື່ນໆ. ສ່ວນສິ່ງມະຫັດສະຈັນຂອງຮູບແບບກະດູກສັນຫຼັງແມ່ນພວກເຮົາສາມາດຜູກພັນເຫດການຕ່າງໆໃຫ້ກັບຄຸນລັກສະນະຕ່າງໆ, ສະນັ້ນ, ເມື່ອການປ່ຽນແປງຂອງຄຸນລັກສະນະດັ່ງກ່າວພວກເຮົາສາມາດປັບປຸງມຸມມອງຂອງພວກເຮົາເພື່ອສະທ້ອນສິ່ງນັ້ນ. ແຕ່ພວກເຮົາ ກຳ ລັງກ້າວ ໜ້າ ຕົວເອງ ໜ້ອຍ ໜຶ່ງ.
ເມື່ອພວກເຮົາດຶງຮູບຈາກ Flickr, ພວກເຮົາ ກຳ ລັງຈະໄດ້ຂໍ້ມູນພຽງພໍເພື່ອສ້າງ URL ສຳ ລັບທຸກຂະ ໜາດ. ເຖິງຢ່າງໃດກໍ່ຕາມການໂຮມຊຸມນຸມນັ້ນມັນຍັງເຫລືອຢູ່ກັບພວກເຮົາ, ດັ່ງນັ້ນພວກເຮົາຈຶ່ງໄດ້ປະຕິບັດ ໜ້າ ທີ່ .image_url () ທີ່ໃຊ້ພາລາມິເຕີຂະ ໜາດ ແລະສົ່ງຄືນການເຊື່ອມຕໍ່ສາທາລະນະ. ເນື່ອງຈາກວ່ານີ້ແມ່ນຮູບແບບກະດູກສັນຫຼັງ, ພວກເຮົາສາມາດໃຊ້ this.get () ເພື່ອເຂົ້າເຖິງຄຸນລັກສະນະຕ່າງໆໃນຮູບແບບ. ສະນັ້ນກັບຮູບແບບນີ້, ພວກເຮົາສາມາດເຮັດສິ່ງຕໍ່ໄປນີ້ຢູ່ບ່ອນອື່ນໃນລະຫັດເພື່ອໃຫ້ໄດ້ URL ຂອງຮູບພາບ Flickr.
flickrImage.image_url ('ຂະ ໜາດ ໃຫຍ່')
ສະຫຼຸບຫຍໍ້ໆ, ເອີ? ເນື່ອງຈາກຮູບແບບນີ້ແມ່ນສະເພາະກັບ ຄຳ ຮ້ອງສະ ໝັກ ຂອງພວກເຮົາ, ພວກເຮົາຈະເພີ່ມບາງ ໜ້າ ທີ່ຫໍ່ເຂົ້າໃນຂະ ໜາດ ຂອງຮູບແລະຂະ ໜາດ.
ການລວບລວມຮູບພາບ
FlickrBomb ຈັດການກັບການລວບລວມຮູບພາບ, ບໍ່ແມ່ນຮູບພາບດຽວ, ແລະກະດູກສັນຫຼັງມີວິທີທີ່ສະດວກໃນການເຮັດແບບນີ້. ການເກັບຊື່ທີ່ ເໝາະ ສົມແມ່ນສິ່ງທີ່ພວກເຮົາຈະໃຊ້ເພື່ອຈັດຮູບພາບ Flickr ຮ່ວມກັນ ສຳ ລັບສະຖານທີ່ດຽວ.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, page: 1, fetch: function (ຄຳ ສຳ ຄັນ, ຄວາມ ສຳ ເລັດ) {var self = ນີ້; ຄວາມ ສຳ ເລັດ = ຜົນ ສຳ ເລັດ || $ .noop; this.keywords = keywords || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', ຂໍ້ມູນ: {api_key: self.key, ຮູບແບບ: 'json', ວິທີການ: 'flickr. photos.search ', tags: this.keywords, per_page: 9, page: this.page, ໃບອະນຸຍາດ: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', ຄວາມ ສຳ ເລັດ: ໜ້າ ທີ່ (ຕອບ) {self.add (ການຕອບຮັບ .photos.photo); ຄວາມ ສຳ ເລັດ ();}}));}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {ຖ້າ (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
ມີສອງສາມຢ່າງທີ່ຄວນສັງເກດຢູ່ນີ້. ກ່ອນອື່ນ ໝົດ, the ຕົວແບບ ຄຸນລັກສະນະບອກການເກັບກູ້ປະເພດຂອງຮູບແບບທີ່ມັນເກັບກໍາ. ພວກເຮົາຍັງມີຄຸນລັກສະນະບາງຢ່າງທີ່ພວກເຮົາເລີ່ມຕົ້ນໃນການ ນຳ ໃຊ້ໃນພາຍຫຼັງ: ທີ່ ສຳ ຄັນແມ່ນ Flickr API ຂອງພວກເຮົາ, ທ່ານຈະຕ້ອງການປ່ຽນ FlickrbombAPIkey ດ້ວຍສາຍຂອງ Flickr API ຂອງທ່ານເອງ. ການໄດ້ຮັບຄີ Flickr API ແມ່ນບໍ່ເສຍຄ່າແລະງ່າຍດາຍ, ພຽງແຕ່ຕິດຕາມລິງນີ້: www.flickr.com/services/api/misc.api_keys.html. ຄຸນລັກສະນະຂອງຫນ້າແມ່ນຫນ້າປັດຈຸບັນຂອງຮູບ Flickr ທີ່ພວກເຮົາຢູ່.
ວິທີການໃຫຍ່ທີ່ນີ້ແມ່ນ .fetch (), ເຊິ່ງບໍ່ມີລາຍລະອຽດກ່ຽວກັບການດຶງຮູບຈາກ Flickr API. ເພື່ອຫລີກລ້ຽງບັນຫາທີ່ມີການຮ້ອງຂໍຂ້າມໂດເມນ, ພວກເຮົາ ກຳ ລັງໃຊ້ JSONP, ເຊິ່ງມີທັງ Flickr API ແລະ jQuery ສະ ໜັບ ສະ ໜູນ. ຕົວກໍານົດການອື່ນໆທີ່ພວກເຮົາກໍາລັງສົ່ງໄປຫາ API ຄວນເປັນຄໍາອະທິບາຍດ້ວຍຕົນເອງ. ໃນຄວາມສົນໃຈພິເສດແມ່ນ ໜ້າ ທີ່ຂອງກະດູກສັນຫຼັງທີ່ຖືກເອີ້ນຢູ່ນີ້. ໃນການເອີ້ນຄືນຄວາມ ສຳ ເລັດທີ່ພວກເຮົາ ກຳ ລັງ ນຳ ໃຊ້ .add (), ໜ້າ ທີ່ ໜຶ່ງ ທີ່ ນຳ ໃຊ້ຄຸນລັກສະນະຂອງຕົວແບບ, ສ້າງຕົວຢ່າງຈາກຄຸນລັກສະນະເຫຼົ່ານັ້ນ, ແລະຈາກນັ້ນເພີ່ມພວກມັນເຂົ້າໃນຊຸດລວບລວມ.
ໜ້າ ທີ່ .nextPage () ແລະ .prevPage () ທຳ ອິດປ່ຽນ ໜ້າ ທີ່ເຮົາຕ້ອງການສະແດງ,
ໃຊ້ຟັງຊັນການເກັບ ກຳ ຂໍ້ມູນ .remove (), ເພື່ອເອົາຮູບແບບທີ່ມີຢູ່ທັງ ໝົດ ອອກຈາກ
ການລວບລວມແລະຫຼັງຈາກນັ້ນໃຫ້ໂທຫາເພື່ອດຶງເອົາຮູບ ສຳ ລັບ ໜ້າ ປັດຈຸບັນ (ທີ່ພວກເຮົາຫາກໍ່ມາຫາ
ປ່ຽນແປງ).
The FlickrBombImage
ການເຮັດວຽກຂອງພວກເຮົາ ສຳ ຮອງ, ພວກເຮົາຕ້ອງການອີກ ໜຶ່ງ ຮູບແບບເພື່ອເປັນຕົວແທນໃຫ້ກັບຮູບພາບຂອງສະຖານທີ່, ເຊິ່ງຈະປະກອບດ້ວຍການລວບລວມຂໍ້ມູນຂອງ FlickrImages, ແລະ FlickrImage ທີ່ຖືກເລືອກໄວ້. ພວກເຮົາຈະເອີ້ນແບບນີ້ວ່າ FlickrBombImage.
var localStorage = (support_local_storage ())? ຮ້ານ ໃໝ່ ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (ນີ້, 'loadFirstImage'); this.flickrImages = FlickrImages () ໃໝ່; this.flickrImages.fetch (this.get ('keywords'), this.loadFirstImage); this.set (id: id.get ("id")); this.bind ('ປ່ຽນ: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {ຖ້າ (this.get ('src') === ບໍ່ມີ ກຳ ນົດ) {this.set ({src: this.flickrImages. first (). image_url ()});}}});
ເນື່ອງຈາກຮູບແບບນີ້ມີຄວາມຮັບຜິດຊອບໃນການຕິດຕາມຮູບພາບທີ່ຖືກຄັດເລືອກໃນປະຈຸບັນລະຫວ່າງການໂຫຼດ ໜ້າ ເວັບ, ມັນ ຈຳ ເປັນຕ້ອງຮູ້ວ່າຮ້ານໃດທີ່ຕ້ອງການໃຊ້.ສາຍ ທຳ ອິດຈະຮັບປະກັນໃຫ້ມີການສະ ໜັບ ສະ ໜູນ ສຳ ລັບຮ້ານຂາຍເຄື່ອງໃນທ້ອງຖິ່ນແລະຫຼັງຈາກນັ້ນສ້າງຮ້ານທີ່ພວກເຮົາຈະໃຊ້ເພື່ອຕໍ່ຮູບພາບທີ່ເລືອກໄວ້.
ກະດູກສັນຫຼັງເຮັດໃຫ້ພວກເຮົາສາມາດ ກຳ ນົດ ໜ້າ ທີ່ .initialize () ເຊິ່ງຈະຖືກເອີ້ນວ່າເມື່ອຕົວຢ່າງຂອງຕົວແບບຖືກສ້າງຂື້ນ. ພວກເຮົາໃຊ້ຟັງຊັນນີ້ໃນ FlickrBombImage ເພື່ອສ້າງຕົວຢ່າງ ໃໝ່ ຂອງການລວບລວມ FlickrImages, ຜ່ານ ຄຳ ທີ່ຈະໃຊ້ ສຳ ລັບຮູບນີ້, ແລະຈາກນັ້ນເກັບເອົາຮູບຈາກ Flickr.
ຟັງຊັນ .loadFirstImage () ໄດ້ຜ່ານການເອີ້ນຄືນເພື່ອເຮັດວຽກເມື່ອຮູບພາບຖືກໂຫລດມາຈາກ Flickr. ດັ່ງທີ່ທ່ານອາດຈະຄາດເດົາໄດ້, ໜ້າ ທີ່ນີ້ ກຳ ນົດຮູບພາບປະຈຸບັນໃຫ້ເປັນຮູບ ທຳ ອິດໃນການເກັບ ກຳ ຂໍ້ມູນຈາກ Flickr. ມັນບໍ່ເຮັດແນວນີ້ຖ້າຮູບພາບປະຈຸບັນໄດ້ຖືກ ກຳ ນົດໄວ້ແລ້ວ.
ພວກເຮົາຍັງຈະໃຊ້ backback ຂອງຄຸນລັກສະນະຂອງກະດູກສັນຫຼັງເພື່ອດັບເພີງ .changeSrc () ຂອງພວກເຮົາເມື່ອຄຸນລັກສະນະຂອງຮູບແບບນີ້ປ່ຽນແປງ. ການເອີ້ນຄືນທັງ ໝົດ ນີ້ແມ່ນການເອີ້ນ .save (), ໜ້າ ທີ່ຕົວແບບຂອງກະດູກສັນຫຼັງທີ່ຄົງຕົວຄຸນລັກສະນະຂອງຮູບແບບໃຫ້ກັບຊັ້ນຂອງຮ້ານໃດກໍ່ຕາມໄດ້ຖືກຈັດຕັ້ງປະຕິບັດ (ໃນກໍລະນີຂອງພວກເຮົາໃນທ້ອງຖິ່ນ). ວິທີນີ້, ທຸກຄັ້ງທີ່ຮູບພາບທີ່ຖືກຄັດເລືອກຖືກປ່ຽນໄປ, ມັນຈະຖືກເອົາໃຈໃສ່ທັນທີ.
The View Layer
ດຽວນີ້ພວກເຮົາມີລະຫັດ backend (ດີ, ດ້ານຫລັງຂອງ ໜ້າ ຈໍ), ພວກເຮົາສາມາດໃສ່ Views. ມຸມມອງໃນກະດູກສັນຫຼັງແມ່ນແຕກຕ່າງກັນເລັກ ໜ້ອຍ ຫຼັງຈາກນັ້ນມຸມມອງໃນກອບ MVC ແບບດັ້ງເດີມອື່ນໆ. ໃນຂະນະທີ່ມຸມມອງໂດຍປົກກະຕິພຽງແຕ່ກ່ຽວຂ້ອງກັບການ ນຳ ສະ ເໜີ, Backbone View ຍັງມີຄວາມຮັບຜິດຊອບຕໍ່ພຶດຕິ ກຳ ເຊັ່ນກັນ. ນັ້ນ ໝາຍ ຄວາມວ່າມຸມມອງຂອງທ່ານບໍ່ພຽງແຕ່ ກຳ ນົດວ່າບາງສິ່ງບາງຢ່າງຈະເປັນແນວໃດ, ແຕ່ມັນກໍ່ຄວນຈະເຮັດໃນເວລາທີ່ພົວພັນກັບມັນ.
ມຸມມອງໂດຍທົ່ວໄປ (ແຕ່ບໍ່ແມ່ນສະ ເໝີ) ຕິດກັບຂໍ້ມູນບາງຢ່າງ, ແລະຜ່ານສາມໄລຍະເພື່ອສ້າງເຄື່ອງ ໝາຍ ການ ນຳ ສະ ເໜີ ຈາກຂໍ້ມູນນັ້ນ:
1. ວັດຖຸ View ແມ່ນເລີ່ມຕົ້ນ, ແລະອົງປະກອບທີ່ຫວ່າງກໍ່ຖືກສ້າງຂື້ນ.
2. ໜ້າ ທີ່ render ຖືກເອີ້ນວ່າ, ສ້າງເຄື່ອງ ໝາຍ ສຳ ລັບມຸມມອງໂດຍການໃສ່ມັນເຂົ້າໃນອົງປະກອບທີ່ສ້າງຂື້ນໃນຂັ້ນຕອນກ່ອນ ໜ້າ ນີ້.
3. ອົງປະກອບຕິດກັບ DOM.
ນີ້ອາດເບິ່ງຄືວ່າມັນເປັນວຽກຫຼາຍທີ່ຈະສ້າງເຄື່ອງ ໝາຍ ບາງຢ່າງ, ແລະພວກເຮົາບໍ່ແມ່ນແຕ່ສ່ວນຂອງການເບິ່ງ, ແຕ່ມັນມີຄວາມ ສຳ ຄັນ, ແລະນີ້ແມ່ນຫຍັງ. ທຸກໆຄັ້ງທີ່ທ່ານດັດແປງອົງປະກອບຕ່າງໆທີ່ຢູ່ໃນ DOM, ທ່ານກໍ່ສ້າງສິ່ງທີ່ເອີ້ນວ່າ reflow ຂອງ browser. ການສະທ້ອນແມ່ນຕົວທ່ອງເວັບທີ່ຄິດໄລ່ວິທີການທຸກໆສິ່ງທີ່ຢູ່ໃນ ໜ້າ ເວັບແມ່ນຕັ້ງຢູ່. ການສະແດງຂອງຕົວທ່ອງເວັບສາມາດເປັນສິ່ງທີ່ບໍ່ດີຕໍ່ການປະຕິບັດຖ້າຖືກເອີ້ນພາຍໃນເຫດການທີ່ລາກຫລືປັບຂະ ໜາດ, ເຊິ່ງມັນຈະຖືກໄຟໃນຊ່ວງໄລຍະສັ້ນ, ແຕ່ຮ້າຍແຮງກວ່ານັ້ນ, ພວກມັນເບິ່ງຄືວ່າບໍ່ມີສາຍ. ດ້ວຍການ ໝູນ ໃຊ້ ໜ້າ ທີ່ສະລັບສັບຊ້ອນ, ທ່ານສາມາດເບິ່ງເຫັນອົງປະກອບຕ່າງໆຖືກເພີ່ມເຂົ້າໃນ ໜ້າ, ແລະມີການປັບ ຕຳ ແໜ່ງ ອົງປະກອບ ໃໝ່. ໂດຍປະຕິບັດຕາມຮູບແບບຂອງກະດູກສັນຫຼັງຂອງການເລີ່ມຕົ້ນ, ການສະແດງແລະການຕິດ, ທ່ານຮັບປະກັນການຕອບສະ ໜອງ ແບບດຽວ, ແລະການປ່ຽນແປງຂອງ ໜ້າ ເວັບຈະຖືກຮັບຮູ້ໂດຍທັນທີ, ໂດຍບໍ່ສົນເລື່ອງຂອງການ ໝູນ ໃຊ້ຂອງອົງປະກອບ.
ການ FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", ລັອກ: ບໍ່ຖືກ, ແບບ: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), ເລີ່ມຕົ້ນ: function (ຕົວເລືອກ) {_.bindAll (ນີ້,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); ນີ້. $ el = $ (this.el); this.image = ໃໝ່ FlickrBombImage ({ຄຳ ສຳ ຄັນ: id, id: options). img.attr ('id')}); this.image.flickrImages.bind ('ເພີ່ມ', this.addImage); this.image.bind ('ປ່ຽນ: src', this.updateSrc);}, ເຫດການ: { "click .setupIcon": "clickSetup", "ກົດ .flickrbombFlyout a.photo": "selectImage", "ກົດ .flickrbombFlyout a.next": "nextFlickrPhotos", "ກົດ .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ... });
ໜ້າ ທີ່ຂອງມຸມມອງນີ້ຖືກຍົກເວັ້ນ ສຳ ລັບຄວາມຖີ່, ລະຫັດແຫຼ່ງທີ່ມີຢູ່ທັງ ໝົດ ມີຢູ່ໃນ GitHub: github.com/zurb/flickrbomb
ຢູ່ເທິງສຸດຂອງມຸມມອງ, ພວກເຮົາມີຄູ່ຮັກທີ່ມີຄຸນລັກສະນະສະເພາະຂອງກະດູກສັນຫຼັງ. tagName ແລະ className ຖືກໃຊ້ເພື່ອ ກຳ ນົດແທັກແລະຊັ້ນທີ່ຈະຖືກ ນຳ ໃຊ້ກັບອົງປະກອບຂອງ View ນີ້. ຈື່ໄວ້ວ່າຂັ້ນຕອນທີ ໜຶ່ງ ຂອງການສ້າງ View ແມ່ນການສ້າງວັດຖຸ, ແລະເນື່ອງຈາກວ່າການສ້າງນັ້ນຖືກຈັດການໂດຍກະດູກສັນຫຼັງ, ພວກເຮົາຕ້ອງລະບຸອົງປະກອບແລະຊັ້ນ. ໃຫ້ສັງເກດວ່າກະດູກສັນຫຼັງມີຄ່າເລີ່ມຕົ້ນທີ່ ເໝາະ ສົມ; ຖ້າພວກເຮົາຍົກເລີກຄຸນລັກສະນະເຫຼົ່ານີ້, div ຈະຖືກ ນຳ ໃຊ້ໂດຍຄ່າເລີ່ມຕົ້ນ, ແລະບໍ່ມີຊັ້ນໃດຈະຖືກ ນຳ ໃຊ້ເວັ້ນເສຍແຕ່ວ່າທ່ານລະບຸຄຸນລັກສະນະນີ້.
ຄຸນລັກສະນະຂອງແມ່ແບບແມ່ນສົນທິສັນຍາ, ແຕ່ບໍ່ຕ້ອງການ. ພວກເຮົາ ກຳ ລັງໃຊ້ມັນຢູ່ນີ້ເພື່ອ ກຳ ນົດຟັງຊັນ JavaScript ສຳ ລັບໃຊ້ເຊິ່ງພວກເຮົາຈະ ນຳ ໃຊ້ເພື່ອສ້າງເຄື່ອງ ໝາຍ ຂອງພວກເຮົາ ສຳ ລັບມຸມມອງນີ້. ພວກເຮົາໃຊ້ _.template () ຟັງຊັນລວມຢູ່ໃນ Underscore.js, ແຕ່ທ່ານສາມາດໃຊ້ເຄື່ອງຈັກທີ່ທ່ານມັກແບບໃດ, ພວກເຮົາບໍ່ຕັດສິນທ່ານ.
ໃນ ໜ້າ ທີ່ .initialize () ຂອງພວກເຮົາພວກເຮົາ ກຳ ລັງດຶງສາຍ ຄຳ ສຳ ຄັນອອກຈາກແທັກຮູບພາບ, ແລະຈາກນັ້ນສ້າງແບບ ຈຳ ລອງ FlickrBombImage ໂດຍໃຊ້ ຄຳ ເຫຼົ່ານັ້ນ. ພວກເຮົາຍັງມີຄວາມຜູກພັນກັບ ໜ້າ ທີ່ .addImage () ທີ່ຈະ ດຳ ເນີນການເມື່ອ FlickrImage ຖືກເພີ່ມເຂົ້າໃນ FlickrImages collection. ຟັງຊັນນີ້ຈະເພີ່ມເຕີມ FlickrImage ທີ່ເພີ່ມເຂົ້າມາໃນຕົວເລືອກ flyout ຂອງພວກເຮົາ. ສາຍສຸດທ້າຍແລະ ສຳ ຄັນທີ່ສຸດແມ່ນການຜູກມັດ ໜ້າ ທີ່ .updateSrc () ໃຫ້ເປັນໄຟເມື່ອ FlickrImage ຖືກເລືອກໄວ້ໃນປະຈຸບັນຖືກປ່ຽນແປງ. ເມື່ອຮູບພາບປະຈຸບັນມີການປ່ຽນແປງໃນຮູບແບບ, ໜ້າ ທີ່ນີ້ຈະເຮັດວຽກ, ປັບປຸງຄຸນລັກສະນະຂອງຄຸນລັກສະນະຮູບພາບ, ແລະ CSS ປັບຂະ ໜາດ ແລະຕັດຮູບໃຫ້ພໍດີກັບຂະ ໜາດ ຂອງຮູບພາບທີ່ຜູ້ໃຊ້ ກຳ ນົດ.
ເຫດການ: {"ກົດປຸ່ມ .setupIcon": "clickSetup", "ກົດ .flickrbombFlyout a.photo": "selectImage", "ກົດ .flickrbombFlyout a.next": "nextFlickrPhotos", "ກົດປຸ່ມ .flickrbombFlyout a.prev": "prevFlickrPhotos:" prevFlickrPhotos "}
ປະຕິບັດຕາມ .initialize () ພວກເຮົາມີສ່ວນການປະພຶດຂອງມຸມມອງ. ກະດູກສັນຫຼັງສະຫນອງວິທີທີ່ສະດວກໃນການຜູກມັດເຫດການໂດຍໃຊ້ວັດຖຸເຫດການ. ຈຸດປະສົງເຫດການໃຊ້ວິທີການ jQuery .delegate () ເພື່ອເຮັດການຜູກມັດຕົວຈິງກັບອົງປະກອບ View, ເພື່ອວ່າບໍ່ວ່າທ່ານຈະ ໝູນ ໃຊ້ກັບອົງປະກອບໃດກໍ່ຕາມພາຍໃນມຸມມອງ, ທຸກໆເຫດການທີ່ຜູກມັດຂອງທ່ານຈະຍັງຄົງເຮັດວຽກຢູ່. ມັນເຮັດວຽກຄືກັນກັບ jQuery .live (), ຍົກເວັ້ນວ່າແທນທີ່ຈະຜູກມັດເຫດການກັບເອກະສານທັງ ໝົດ, ທ່ານສາມາດຜູກມັດພວກມັນໃນຂອບເຂດຂອງອົງປະກອບໃດ ໜຶ່ງ. ກະແຈ ສຳ ຄັນຂອງການເຂົ້າແຕ່ລະຄັ້ງໃນຈຸດປະສົງເຫດການປະກອບດ້ວຍເຫດການແລະຕົວເລືອກ, ຄ່າຈະສະແດງເຖິງ ໜ້າ ທີ່ທີ່ຄວນຈະຖືກຜູກກັບເຫດການນັ້ນ. ໃຫ້ສັງເກດວ່າ .delegate () ບໍ່ເຮັດວຽກກັບບາງເຫດການເຊັ່ນສົ່ງ, ເບິ່ງເອກະສານ jQuery .live () ສຳ ລັບບັນຊີລາຍຊື່ເຕັມຂອງເຫດການທີ່ຮອງຮັບ.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); ສົ່ງຄືນນີ້;}
ສຸດທ້າຍ, ພວກເຮົາມີ ໜ້າ ທີ່ .render () ທີ່ຮັບຜິດຊອບໃນການສ້າງເຄື່ອງ ໝາຍ ຂອງພວກເຮົາແລະເຮັດວຽກເພີ່ມເຕີມອື່ນໆທີ່ບໍ່ສາມາດປະຕິບັດໄດ້ຈົນກວ່າ View markup ໄດ້ຖືກເພີ່ມເຂົ້າໃນ View Element. ຫຼັງຈາກທີ່ພວກເຮົາອອກແບບແມ່ແບບຂອງພວກເຮົາ, ພວກເຮົາ ຈຳ ເປັນຕ້ອງໂທຫາ .fetch () ໃສ່ FlickrBombImage ຂອງພວກເຮົາ. .fetch () ແມ່ນຟັງຊັ່ນ Backbone ທີ່ໄດ້ຮັບ ສຳ ເນົາແບບ ຈຳ ລອງລ້າສຸດຈາກຊັ້ນຄວາມທົນທານ. ຖ້າພວກເຮົາໄດ້ບັນທຶກຮູບແບບນີ້ກ່ອນ, .fetch () ຈະດຶງເອົາຂໍ້ມູນດັ່ງກ່າວດຽວນີ້. ຫຼັງຈາກຮູບໄດ້ຖືກດຶງເອົາແລ້ວພວກເຮົາ ຈຳ ເປັນຕ້ອງໂທຫາຂະ ໜາດ ເພື່ອວາງ ຕຳ ແໜ່ງ ຂອງມັນຢ່າງຖືກຕ້ອງ.
ການຍືດຍຸ່ນບ້ານ
ດ້ວຍຊິ້ນສ່ວນຕ່າງໆທີ່ຢູ່ໃນສະຖານທີ່, ສິ່ງທີ່ພວກເຮົາ ຈຳ ເປັນຕ້ອງເຮັດໃນຕອນນີ້ແມ່ນຊອກຫາຮູບພາບຂອງສະຖານທີ່ຢູ່ໃນ ໜ້າ ເວັບແລະປ່ຽນແທນດ້ວຍມຸມເບິ່ງ FlickrBombImage ທີ່ສະແດງ.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (ນີ້), flickrBombImageView = ໃໝ່ FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView). render (). el);});
snip ຂະ ໜາດ ນ້ອຍນີ້ ຈຳ ເປັນຕ້ອງໄດ້ແລ່ນຢູ່ທາງລຸ່ມຂອງ ໜ້າ ເຈ້ຍ, ຫຼືໃນເອກະສານການກຽມພ້ອມທີ່ຈະກັບມາ, ເພື່ອຮັບປະກັນວ່າມັນສາມາດຊອກຫາຮູບພາບຂອງສະຖານທີ່ທີ່ມັນຈະມາແທນ. ພວກເຮົາໃຊ້ສົນທິສັນຍາຂອງການ ກຳ ນົດ flickr: // [KEYWORD] ໃນ src ຄຸນລັກສະນະຂອງປ້າຍໂຄສະນາເພື່ອຊີ້ບອກວ່າມັນຄວນຈະມີປະຊາກອນທີ່ມີຮູບພາບຈາກ Flickr. ພວກເຮົາຊອກຫາອົງປະກອບຮູບພາບດ້ວຍຄຸນລັກສະນະທີ່ກົງກັນກັບ src, ສ້າງ FlickrBombImageView ໃຫມ່, ແລະຫຼັງຈາກນັ້ນປ່ຽນຮູບພາບດັ່ງກ່າວກັບພວກເຮົາ. ພວກເຮົາຈັບເອົາ ສຳ ເນົາຮູບພາບຕົ້ນສະບັບແລະສົ່ງໄປທີ່ FlickrBombView ຂອງພວກເຮົາ, ເພື່ອວ່າພວກເຮົາສາມາດດຶງຕົວເລືອກການຕັ້ງຄ່າເພີ່ມເຕີມບາງຢ່າງທີ່ອາດຈະຖືກລະບຸໄວ້ໃນອົງປະກອບ.
ຜົນສຸດທ້າຍຂອງການເຮັດວຽກ ໜັກ ທັງ ໝົດ ນັ້ນແມ່ນ API ງ່າຍດາຍ ສຳ ລັບຄົນທີ່ໃຊ້ຫ້ອງສະມຸດ. ພວກເຂົາພຽງແຕ່ສາມາດ ກຳ ນົດແທັກຮູບພາບໂດຍໃຊ້ flickr: // ສົນທິສັນຍາ, ຖີ້ມລະຫັດ FlickrBomb ຢູ່ທາງລຸ່ມຂອງ ໜ້າ ຂອງພວກເຂົາ, ແລະ bam, ພວກເຂົາໄດ້ມີຮູບພາບທີ່ຕັ້ງຈາກ Flickr.
ເຮັດວຽກໄດ້ດີກັບໂປແກຼມ ol ເວັບໃຫຍ່ເຊັ່ນກັນ
ພວກເຮົາມີໂປແກຼມ ol web ທີ່ມີຊື່ວ່າ Notable, ເຊິ່ງຂຽນໂດຍບໍ່ຕ້ອງກັງວົນກ່ຽວກັບການສ້າງເນື້ອຫາໃຫ້ກັບລູກຄ້າ. ໃນເວລາທີ່ພວກເຮົາຕ້ອງການທີ່ຈະເຮັດໃຫ້ພາກສ່ວນຂອງແອັບ tur turbo ຄິດຄ່າໂດຍການສ້າງເນື້ອຫາໃຫ້ກັບລູກຄ້າ, ພວກເຮົາໄດ້ເລືອກເອົາກະດູກສັນຫຼັງ. ເຫດຜົນແມ່ນຄືກັນ: ພວກເຮົາຕ້ອງການໂຄງຮ່າງທີ່ມີນ້ ຳ ໜັກ ເບົາເພື່ອຊ່ວຍຮັກສາລະຫັດ, ແຕ່ບໍ່ບັງຄັບໃຫ້ພວກເຮົາຄິດ ໃໝ່ ກ່ຽວກັບ ຄຳ ຮ້ອງສະ ໝັກ ທັງ ໝົດ.
ພວກເຮົາໄດ້ເປີດຕົວການປ່ຽນແປງໃນຕົ້ນປີນີ້ດ້ວຍຜົນ ສຳ ເລັດທີ່ຍິ່ງໃຫຍ່, ແລະພວກເຮົາໄດ້ຮ້ອງເພງສັນລະເສີນກ່ຽວກັບກະດູກສັນຫຼັງນັບຕັ້ງແຕ່ນັ້ນມາ.
ຊັບພະຍາກອນເພີ່ມເຕີມ
ມີຫຼາຍສິ່ງຫຼາຍຢ່າງ ສຳ ລັບ Backbone ກ່ວາສິ່ງທີ່ຂ້ອຍໄດ້ກວມເອົາໃນບົດຂຽນນີ້, ສ່ວນ C (ຕົວຄວບຄຸມ) ຂອງ MVC (ຕົວຄວບຄຸມແບບເບິ່ງ) ສຳ ລັບເຄື່ອງເລີ່ມຕົ້ນ, ເຊິ່ງຕົວຈິງແລ້ວແມ່ນ R (router) ໃນລຸ້ນລ້າສຸດ. ແລະມັນມີທັງ ໝົດ ໃນເອກະສານກະດູກສັນຫຼັງ, ອ່ານເຊົ້າວັນເສົາທີ່ມີແສງສະຫວ່າງ:
documentcloud.github.com/backbone/
ຖ້າການສອນແບບດັ້ງເດີມເພີ່ມເຕີມແມ່ນສິ່ງຂອງທ່ານ, ຫຼັງຈາກນັ້ນກວດເບິ່ງລະຫັດທີ່ຖືກບັນທຶກໄວ້ເປັນຢ່າງດີຂອງໂປແກຼມ todo ນີ້ທີ່ຂຽນໄວ້ໃນກະດູກສັນຫຼັງ:
documentcloud.github.com/backbone/docs/todos.html
