Χρησιμοποιήστε το Backbone.js για να επιταχύνετε τις αλληλεπιδράσεις

Περιεχόμενο

• Ας ξεκινήσουμε τότε
• Το πρώτο μας μοντέλο
• Μια συλλογή εικόνων
• Το FlickrBombImage
• Το επίπεδο προβολής
• Το FlickrBombImageView
• Το σπίτι Stretch
• Λειτουργεί υπέροχα και με μεγάλες εφαρμογές ιστού
• Επιπρόσθετοι πόροι

Εάν θέλετε να δημιουργήσετε γρήγορα ένα μικρό εργαλείο JavaScript, πιθανότατα δεν σκέφτεστε να χρησιμοποιήσετε ένα πλαίσιο. Ευκολότερο να χαράξετε μαζί κάποιον κώδικα jQuery αντί να εγκαταστήσετε και να μάθετε ένα νέο πλαίσιο, σωστά; Λάθος, το Backbone.js είναι ένα σούπερ ελαφρύ πλαίσιο κόλλας που μοιάζει με το κανονικό παλιό JavaScript που συνηθίζεις να γράφεις.

Κάνουμε πολλά στατικά πρωτότυπα εδώ στο ZURB, επειδή θέλουμε να μπορούμε να κάνουμε κλικ σε σελίδες χωρίς να χρειαστεί να γράψουμε κώδικα backend. Συχνά, ρίχναμε άθικτες γκρι εικόνες placeholder ή μερικές φορές πηγαίναμε στο Flickr για δείγματα εικόνων για να μας βοηθήσουν να απεικονίσουμε τι μπορεί να πάει στο τελικό πρόχειρο. Μέχρι μια μαγική Παρασκευή, όταν αποφασίσαμε ότι θα ήταν φοβερό να γράψουμε κάποια JavaScript για να λύσουμε τα προβλήματά μας. Θέλαμε να μπορούμε να αναζητούμε και να επιλέγουμε φωτογραφίες στο Flickr, απευθείας από τις ίδιες τις εικόνες placeholder. Θα το ονομάζαμε FlickrBomb και αυτή είναι η ιστορία του πώς το φτιάξαμε χρησιμοποιώντας το Backbone.js.

Συνιστάται ιδιαίτερα να ρίξετε μια γρήγορη ματιά στο FlickrBomb πριν διαβάσετε. Είναι ένας από αυτούς τους τύπους συμφωνιών "ένα κλικ αξίζει χίλιες λέξεις". Προχωρήστε, θα περιμένουμε.

Υπάρχουν πολλά πλαίσια JavaScript στο μπλοκ αυτές τις μέρες, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Αλλά μας άρεσε το Backbone.js για αυτό το συγκεκριμένο έργο για μερικούς διαφορετικούς λόγους:

1. Είναι ελαφρύ (100% χωρίς λιπαρά)

• σε βάρος, με την τελευταία συσκευασμένη έκδοση να είναι περίπου 4,6kb
• στον κώδικα, καθώς είναι πάνω από 1.000 γραμμές κώδικα, δεν είναι πολύ δύσκολο να ακολουθήσετε ένα ίχνος στοίβας στα εσωτερικά χωρίς να χάσετε το μυαλό σας

2. Μοιάζει με JavaScript

• γιατί είναι JavaScript, αυτό είναι και όλα
• χρησιμοποιεί το jQuery, το οποίο ακόμη και η γιαγιά σου γνωρίζει αυτές τις μέρες

3. Σούπερ απλή επιμονή

• έξω από το κουτί διατηρεί τα δεδομένα σε ένα backend (μέσω REST), αλλά ρίχνοντας σε ένα μόνο plug-in θα εξοικονομήσει στην τοπική αποθήκευση αντ 'αυτού
• επειδή αφαιρεί το API επιμονής, θα μπορούσαμε να το διατηρήσουμε σε ένα REST backend απλώς καταργώντας την τοπική προσθήκη αποθήκευσης

Ας ξεκινήσουμε τότε

Επειδή το Backbone.js είναι απλώς JavaScript, το μόνο που πρέπει να κάνουμε είναι να το συμπεριλάβουμε μαζί με το Underscore.js στη σελίδα. Το jQuery δεν είναι μια σκληρή εξάρτηση για το Backbone καθαυτό, αλλά θα το χρησιμοποιούμε, οπότε θα το συμπεριλάβουμε εδώ. Θα συνδέσουμε επίσης την προσθήκη τοπικού χώρου αποθήκευσης, καθώς δεν θέλουμε να ταλαιπωρήσουμε με τη ρύθμιση ενός 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 ή απλώς ενσωματωμένος αν αυτό είναι δικό σας. Απλώς θυμηθείτε να το συμπεριλάβετε μετά το Backbone. Το Backbone επιτρέπει την αφαίρεση τμημάτων της εφαρμογής μας, ώστε να είναι και τα δύο αρθρωτά για εύκολη επαναχρησιμοποίηση και πιο ευανάγνωστα για άλλους. Για να δείξουμε καλύτερα αυτήν την αφαίρεση, επρόκειτο να εξηγήσουμε το σχεδιασμό του FlickrBomb από κάτω προς τα πάνω, ξεκινώντας από τα μοντέλα και τελειώνοντας με τις προβολές.

Το πρώτο μας μοντέλο

Το πρώτο έργο που επρόκειτο να αντιμετωπίσει είναι να τραβήξει τις φωτογραφίες από το Flickr. Η μοντελοποίηση ενός FlickrImage στο backbone είναι αρκετά απλή, θα δημιουργήσουμε ένα νέο μοντέλο που ονομάζεται 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 =' ';} επιστροφή "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})

Τα μοντέλα στο Backbone είναι αντικείμενα που μπορούν να διατηρηθούν και έχουν κάποιες λειτουργίες που σχετίζονται με αυτά, όπως τα μοντέλα σε άλλα πλαίσια MVC. Το μαγικό μέρος των μοντέλων Backbone είναι ότι μπορούμε να συνδέσουμε τα συμβάντα σε χαρακτηριστικά, έτσι ώστε όταν αλλάξει αυτό το χαρακτηριστικό να ενημερώσουμε τις απόψεις μας για να το αντικατοπτρίσουν. Αλλά προχωράμε λίγο μπροστά μας.

Όταν τραβάμε τις φωτογραφίες από το Flickr, θα λάβουμε αρκετές πληροφορίες για να δημιουργήσουμε διευθύνσεις URL για όλα τα μεγέθη. Ωστόσο, η συναρμολόγηση αφήνεται σε εμάς, οπότε εφαρμόσαμε τη συνάρτηση .image_url () που παίρνει μια παράμετρο μεγέθους και επιστρέφει έναν δημόσιο σύνδεσμο. Επειδή αυτό είναι ένα μοντέλο ραχοκοκαλιάς, μπορούμε να χρησιμοποιήσουμε αυτό το .get () για πρόσβαση σε χαρακτηριστικά του μοντέλου. Έτσι, με αυτό το μοντέλο, μπορούμε να κάνουμε τα ακόλουθα αλλού στον κώδικα για να λάβουμε τη διεύθυνση URL μιας εικόνας Flickr.

flickrImage.image_url («μεγάλο»)

Αρκετά συνοπτικό, ε; Δεδομένου ότι αυτό το μοντέλο είναι συγκεκριμένο για την εφαρμογή μας, θα προσθέσουμε μερικές λειτουργίες περιτυλίγματος για τα μεγέθη εικόνας πλήρους μεγέθους και αντίχειρα.

Μια συλλογή εικόνων

Το FlickrBomb ασχολείται με συλλογές εικόνων, όχι μεμονωμένων εικόνων και το Backbone έχει έναν βολικό τρόπο για τη μοντελοποίηση αυτού. Η κατάλληλη ονομασία Συλλογή είναι αυτό που θα χρησιμοποιήσουμε για να ομαδοποιήσουμε τις εικόνες Flickr μαζί για ένα μόνο σύμβολο κράτησης θέσης.

var FlickrImages = Backbone.Collection.extend ({μοντέλο: FlickrImage, key: flickrbombAPIkey, σελίδα: 1, fetch: function (λέξεις-κλειδιά, επιτυχία) {var self = this; επιτυχία = επιτυχία || $ .noop; this.keywords = λέξεις-κλειδιά || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, μορφή: 'json', μέθοδος: 'flickr. photos.search ', tags: this.keywords, per_page: 9, page: this.page, license: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', επιτυχία: function (απόκριση) {self.add (απόκριση .photos.photo); επιτυχία ();}});}, 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);}});

Υπάρχουν μερικά πράγματα που πρέπει να σημειώσετε εδώ. Πρώτα από, το μοντέλο Το χαρακτηριστικό λέει στις συλλογές τι είδους μοντέλο συλλέγει. Έχουμε επίσης ορισμένα χαρακτηριστικά που ξεκινήσαμε για χρήση αργότερα: το κλειδί είναι το κλειδί API Flickr, θα θελήσετε να αντικαταστήσετε το flickrbombAPIkey με τη συμβολοσειρά του δικού σας κλειδιού Flickr API. Η λήψη ενός κλειδιού Flickr API είναι δωρεάν και εύκολη, απλώς ακολουθήστε αυτόν τον σύνδεσμο: www.flickr.com/services/api/misc.api_keys.html. Το χαρακτηριστικό της σελίδας είναι η τρέχουσα σελίδα των φωτογραφιών Flickr στην οποία βρισκόμαστε.

Η μεγάλη μέθοδος εδώ είναι το .fetch (), το οποίο αφαιρεί τις λεπτομέρειες λήψης φωτογραφιών από το Flickr API. Για να αποφύγουμε προβλήματα με αιτήματα μεταξύ τομέων, χρησιμοποιούμε το JSONP, το οποίο υποστηρίζουν τόσο το Flickr API όσο και το jQuery. Οι άλλες παράμετροι που περνάμε στο API πρέπει να είναι αυτονόητες. Ιδιαίτερο ενδιαφέρον παρουσιάζονται εδώ οι λειτουργίες Backbone. Στην επανάκληση επιτυχίας χρησιμοποιούμε το .add (), μια συνάρτηση που λαμβάνει μια σειρά χαρακτηριστικών μοντέλου, δημιουργεί παρουσίες μοντέλου από αυτά τα χαρακτηριστικά και στη συνέχεια τα προσθέτει στη συλλογή.

Οι συναρτήσεις .nextPage () και .prevPage () αλλάζουν πρώτα τη σελίδα που θέλουμε να εμφανίσουμε,
χρησιμοποιήστε τη λειτουργία συλλογής .remove (), για να αφαιρέσετε όλα τα υπάρχοντα μοντέλα από το
συλλογή και, στη συνέχεια, καλέστε τη λήψη για να λάβετε τις φωτογραφίες για την τρέχουσα σελίδα (που απλά
άλλαξε).

Το FlickrBombImage

Εργαζόμενοι για τη δημιουργία αντιγράφων ασφαλείας, χρειαζόμαστε ένα ακόμη μοντέλο για την αναπαράσταση της εικόνας placeholder, η οποία θα αποτελείται από μια συλλογή FlickrImages και από το τρέχον FlickrImage που έχει επιλεγεί. Θα ονομάσουμε αυτό το μοντέλο το FlickrBombImage.

var localStorage = (υποστηρίζει_τοπική_ αποθήκευση ()); νέο κατάστημα ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new 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') === undefined) {this.set ({src: this.flickrImages). πρώτα (). image_url ()});}}});

Δεδομένου ότι αυτό το μοντέλο είναι υπεύθυνο για την παρακολούθηση της τρέχουσας επιλεγμένης εικόνας μεταξύ των φορτώσεων της σελίδας, πρέπει να γνωρίζει τι κατάστημα τοπικών καταστημάτων θα χρησιμοποιήσει.Η πρώτη γραμμή θα διασφαλίσει ότι υπάρχει υποστήριξη για το τοπικό κατάστημα και, στη συνέχεια, δημιουργήστε το κατάστημα που θα χρησιμοποιήσουμε για να διατηρήσετε την επιλεγμένη εικόνα.

Το Backbone μας επιτρέπει να ορίσουμε μια συνάρτηση .initialize () που θα κληθεί όταν δημιουργηθεί μια παρουσία του μοντέλου. Χρησιμοποιούμε αυτήν τη λειτουργία στο FlickrBombImage για να δημιουργήσουμε μια νέα παρουσία της συλλογής FlickrImages, να μεταφέρουμε τις λέξεις-κλειδιά που θα χρησιμοποιηθούν για αυτήν την εικόνα και, στη συνέχεια, να ανακτήσουμε τις εικόνες από το Flickr.

Η συνάρτηση .loadFirstImage () έχει περάσει ως επιστροφή κλήσης για εκτέλεση όταν οι εικόνες έχουν φορτωθεί από το Flickr. Όπως πιθανότατα μπορείτε να μαντέψετε, αυτή η λειτουργία ορίζει την τρέχουσα εικόνα ως την πρώτη στη συλλογή από το Flickr. Δεν το κάνει εάν η τρέχουσα εικόνα έχει ήδη ρυθμιστεί.

Θα χρησιμοποιήσουμε επίσης τις επιστροφές χαρακτηριστικών του Backbone για να ενεργοποιήσουμε τη λειτουργία .changeSrc () όταν αλλάζει το χαρακτηριστικό src αυτού του μοντέλου. Το μόνο που κάνει αυτό το callback είναι η κλήση .save (), μια συνάρτηση μοντέλου Backbone που διατηρεί τα χαρακτηριστικά του μοντέλου σε οποιοδήποτε επίπεδο αποθήκευσης έχει εφαρμοστεί (στην περίπτωσή μας τοπικό κατάστημα). Με αυτόν τον τρόπο, όποτε αλλάζει η επιλεγμένη εικόνα, παραμένει αμέσως.

Το επίπεδο προβολής

Τώρα που έχουμε γράψει όλο τον κώδικα backend (καλά, frontend backend), μπορούμε να συνδυάσουμε τις Προβολές. Οι προβολές στο Backbone είναι λίγο διαφορετικές από τις προβολές σε άλλα παραδοσιακά πλαίσια MVC. Ενώ μια προβολή συνήθως αφορά μόνο την παρουσίαση, μια προβολή Backbone είναι υπεύθυνη και για τη συμπεριφορά. Αυτό σημαίνει ότι η προβολή σας δεν καθορίζει μόνο πώς φαίνεται κάτι, αλλά και τι πρέπει να κάνει όταν αλληλεπιδρά με.

Μια προβολή συνδέεται συνήθως (αλλά όχι πάντα) με κάποια δεδομένα και περνάει από τρεις φάσεις για να δημιουργήσει σήμανση παρουσίασης από αυτά τα δεδομένα:

1. Το αντικείμενο View αρχικοποιείται και δημιουργείται ένα κενό στοιχείο.
2. Η συνάρτηση απόδοσης καλείται, δημιουργώντας τη σήμανση για την προβολή εισάγοντας την στο στοιχείο που δημιουργήθηκε στο προηγούμενο βήμα.
3. Το στοιχείο είναι προσαρτημένο στο DOM.

Αυτό μπορεί να μοιάζει με πολλή δουλειά για να δημιουργήσετε κάποια σήμανση και δεν είμαστε ακόμη και στο τμήμα συμπεριφοράς της Αναλυτικής προβολής, αλλά είναι σημαντικό και για αυτό το λόγο. Κάθε φορά που τροποποιείτε στοιχεία που βρίσκονται στο DOM, ενεργοποιείτε κάτι που ονομάζεται αναδιαμόρφωση του προγράμματος περιήγησης. Αναδιαμόρφωση είναι το πρόγραμμα περιήγησης που υπολογίζει εκ νέου πώς τοποθετείται κάθε πράγμα στη σελίδα. Οι ανατροφοδοτήσεις του προγράμματος περιήγησης μπορεί να είναι κακές για την απόδοση, εάν κληθούν σε ένα συμβάν μεταφοράς ή αλλαγής μεγέθους, που ενεργοποιείται σε πολύ μικρό διάστημα, αλλά χειρότερα, φαίνονται ατημέλητα. Με τον περίπλοκο χειρισμό σελίδων, μπορείτε πραγματικά να δείτε τα στοιχεία να προστίθενται στη σελίδα και να πραγματοποιούνται επανατοποθέτηση στοιχείων. Ακολουθώντας το μοτίβο της αρχικοποίησης, της απόδοσης και της επισύναψης του Backbone, εγγυάστε μία επαναφορά και οι αλλαγές στη σελίδα θα γίνουν αντιληπτές στιγμιαίες, ανεξάρτητα από την πολυπλοκότητα του χειρισμού στοιχείων.

Το FlickrBombImageView

var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), αρχικοποίηση: function (options) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var Keywords = options. img.attr ('src') .replace ('flickr: //', '); this. $ el = $ (this.el); this.image = new 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" render: 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, αλλά μπορείτε να χρησιμοποιήσετε την μηχανή templating που προτιμάτε, δεν θα σας κρίνουμε.

Στη συνάρτηση .initialize () βγάζουμε τη συμβολοσειρά λέξεων-κλειδιών από την ετικέτα εικόνας και, στη συνέχεια, δημιουργούμε ένα μοντέλο FlickrBombImage χρησιμοποιώντας αυτές τις λέξεις-κλειδιά. Δεσμευόμαστε επίσης τη λειτουργία .addImage () που θα εκτελεστεί όταν ένα FlickrImage προστίθεται στη συλλογή FlickrImages. Αυτή η λειτουργία θα προσθέσει το πρόσφατα προστιθέμενο FlickrImage στο flyout του επιλογέα εικόνων. Η τελευταία και πιο σημαντική γραμμή δεσμεύει τη λειτουργία .updateSrc () να ενεργοποιείται όταν αλλάζει το τρέχον επιλεγμένο FlickrImage. Όταν η τρέχουσα εικόνα αλλάξει στο μοντέλο, αυτή η συνάρτηση θα εκτελεστεί, θα ενημερώσει το χαρακτηριστικό src του στοιχείου εικόνας και θα αλλάξει το μέγεθος του CSS και θα περικόψει την εικόνα ώστε να ταιριάζει στις διαστάσεις της εικόνας που καθορίζει ο χρήστης.

συμβάντα: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPotos "}

Μετά το .initialize () έχουμε το τμήμα συμπεριφοράς της προβολής. Το Backbone παρέχει έναν βολικό τρόπο σύνδεσης των συμβάντων χρησιμοποιώντας ένα αντικείμενο συμβάντων. Το αντικείμενο συμβάντων χρησιμοποιεί τη μέθοδο jQuery .delegate () για να κάνει την πραγματική δέσμευση στο στοιχείο προβολής, έτσι ώστε ανεξάρτητα από το τι χειρισμό κάνετε στο στοιχείο μέσα στην προβολή, όλα τα δεσμευμένα συμβάντα θα εξακολουθούν να λειτουργούν. Λειτουργεί ακριβώς όπως το jQuery .live (), εκτός του ότι αντί να δεσμεύετε συμβάντα σε ολόκληρο το έγγραφο, μπορείτε να τα συνδέσετε εντός του πεδίου οποιουδήποτε στοιχείου. Το κλειδί κάθε καταχώρησης στο αντικείμενο συμβάντων αποτελείται από το συμβάν και τον επιλογέα, η τιμή υποδεικνύει ότι η συνάρτηση πρέπει να συνδέεται με αυτό το συμβάν. Σημειώστε ότι το .delegate () δεν λειτουργεί με ορισμένα συμβάντα όπως υποβολή, ανατρέξτε στην τεκμηρίωση jQuery .live () για μια πλήρη λίστα υποστηριζόμενων συμβάντων.

render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); αυτό το μέγεθος (); επιστρέψτε αυτό;}

Τέλος, έχουμε τη συνάρτηση .render () που είναι υπεύθυνη για τη δημιουργία της σήμανσής μας και για την εκτέλεση τυχόν πρόσθετων εργασιών που δεν μπορούν να εκτελεστούν έως ότου προστεθεί η σήμανση View στο στοιχείο Προβολή. Αφού αποδώσουμε το πρότυπό μας, πρέπει να καλέσουμε το .fetch () στο FlickrBombImage. .fetch () είναι μια συνάρτηση Backbone που λαμβάνει το πιο πρόσφατο αντίγραφο του μοντέλου από το επίπεδο επιμονής. Εάν είχαμε αποθηκεύσει αυτό το μοντέλο πριν, το .fetch () θα ανακτήσει αυτά τα δεδομένα τώρα. Μετά τη λήψη της εικόνας πρέπει να καλέσουμε το μέγεθος για να την τοποθετήσουμε σωστά.

Το σπίτι Stretch

Με όλα τα κομμάτια στη θέση τους, το μόνο που χρειάζεται να κάνουμε τώρα είναι να βρούμε τις εικόνες κράτησης θέσης στη σελίδα και να τις αντικαταστήσουμε με τις προβαλλόμενες προβολές FlickrBombImage.

$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. απόδοση (). el);});

Αυτό το μικρό απόκομμα πρέπει να εκτελεστεί στο κάτω μέρος της σελίδας ή σε μια επιστροφή ετοιμότητας για να διασφαλιστεί ότι μπορεί να βρει τις εικόνες κράτησης θέσης που θα αντικαταστήσει. Χρησιμοποιούμε τη σύμβαση καθορισμού του flickr: // [KEYWORD] στο χαρακτηριστικό src μιας ετικέτας εικόνας για να υποδείξουμε ότι θα πρέπει να συμπληρώνεται με εικόνες από το Flickr. Βρίσκουμε στοιχεία εικόνας με ένα αντίστοιχο χαρακτηριστικό src, δημιουργούμε ένα νέο FlickrBombImageView και στη συνέχεια αντικαθιστούμε την εικόνα με τη δική μας. Παίρνουμε ένα αντίγραφο της αρχικής εικόνας και το διαβιβάζουμε στο FlickrBombView, ώστε να τραβήξουμε μερικές πρόσθετες επιλογές διαμόρφωσης που ενδέχεται να έχουν καθοριστεί στο στοιχείο.

Το τελικό αποτέλεσμα αυτής της σκληρής δουλειάς είναι ένα πολύ απλό API για άτομα που χρησιμοποιούν τη βιβλιοθήκη. Μπορούν απλώς να ορίσουν ετικέτες εικόνας χρησιμοποιώντας τη σύμβαση flickr: //, να ρίξουν τον κώδικα FlickrBomb στο κάτω μέρος της σελίδας τους, και bam, έχουν εικόνες κράτησης θέσης από το Flickr.

Λειτουργεί υπέροχα και με μεγάλες εφαρμογές ιστού

Έχουμε μια μεγάλη εφαρμογή ιστού με την ονομασία Notable, η οποία γράφτηκε χωρίς ανησυχία για τη δημιουργία περιεχομένου από την πλευρά του πελάτη. Όταν θέλαμε να χρεώσουμε τμήματα του turbo της εφαρμογής δημιουργώντας περιεχόμενο πελάτη, επιλέξαμε το Backbone. Οι λόγοι ήταν οι ίδιοι: θέλαμε ένα ελαφρύ πλαίσιο για να διατηρήσουμε τον κώδικα οργανωμένο, αλλά όχι να μας αναγκάσει να επανεξετάσουμε ολόκληρη την εφαρμογή.

Ξεκινήσαμε τις αλλαγές νωρίτερα φέτος με μεγάλη επιτυχία και έκτοτε τραγουδούμε τους Backbones επαίνους.

Επιπρόσθετοι πόροι

Υπάρχουν πολλά περισσότερα στο Backbone από αυτό που κάλυψα σε αυτό το άρθρο, το τμήμα C (ελεγκτής) του MVC (ελεγκτής προβολής μοντέλου) για εκκινητές, που είναι στην πραγματικότητα R (δρομολογητής) στην τελευταία έκδοση. Και όλα αυτά καλύπτονται στην τεκμηρίωση του Backbone, ένα ελαφρύ πρωί του Σαββάτου που διαβάζει:
documentcloud.github.com/backbone/

Εάν τα πιο παραδοσιακά μαθήματα είναι δικά σας, ελέγξτε τον πολύ καλά τεκμηριωμένο κώδικα αυτής της εφαρμογής todo γραμμένο στο Backbone:
documentcloud.github.com/backbone/docs/todos.html