Διεπαφή Ιστού

Ένας οδηγός για την οικοδόμηση της πρώτης σας εφαρμογής Ember.js

Καθώς οι σύγχρονες διαδικτυακές εφαρμογές κάνουν όλο και περισσότερο από την πλευρά του πελάτη (το ίδιο το γεγονός ότι τις αναφέρουμε τώρα ως «εφαρμογές Ιστού» σε αντίθεση με τις «ιστοσελίδες» είναι αρκετά ξεκάθαρο), υπάρχει αυξανόμενο ενδιαφέρον για τα πλαίσια από την πλευρά των πελατών . Υπάρχουν πολλοί παίκτες σε αυτό το πεδίο, αλλά για εφαρμογές με πολλές λειτουργίες και πολλά κινούμενα μέρη, δύο από αυτά ξεχωρίζουν συγκεκριμένα: Angular.js και Ember.js .

Έχουμε ήδη δημοσιεύσει ένα περιεκτικό [Tutorial Angular.js] [https://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app], οπότε εμείς ' θα επικεντρωθούμε στο Ember.js σε αυτήν την ανάρτηση, στην οποία θα δημιουργήσουμε μια απλή εφαρμογή Ember για την καταγραφή της μουσικής σας συλλογής. Θα σας γνωρίσουν τα κύρια δομικά στοιχεία του πλαισίου και θα ρίξετε μια ματιά στις αρχές του σχεδιασμού του. Εάν θέλετε να δείτε τον πηγαίο κώδικα κατά την ανάγνωση, διατίθεται ως rock-and-roll στο Github .

Τι πρόκειται να οικοδομήσουμε;

Εδώ θα είναι η εφαρμογή Rock & Roll στην τελική της έκδοση:

Στα αριστερά, θα δείτε ότι έχουμε μια λίστα με καλλιτέχνες και, στα δεξιά, μια λίστα τραγουδιών από τον επιλεγμένο καλλιτέχνη (μπορείτε επίσης να δείτε ότι έχω καλή γεύση στη μουσική, αλλά διαπερνά). Νέοι καλλιτέχνες και τραγούδια μπορούν να προστεθούν απλά πληκτρολογώντας στο πλαίσιο κειμένου και πατώντας το παρακείμενο κουμπί. Τα αστέρια δίπλα σε κάθε τραγούδι χρησιμεύουν για να το βαθμολογήσουν, à la iTunes.

Θα μπορούσαμε να αναλύσουμε τη στοιχειώδη λειτουργικότητα της εφαρμογής στα ακόλουθα βήματα:

Κάνοντας κλικ στο «Προσθήκη» προσθέτει έναν νέο καλλιτέχνη στη λίστα, με ένα όνομα που καθορίζεται από το πεδίο «Νέος καλλιτέχνης» (το ίδιο ισχύει για τραγούδια για έναν συγκεκριμένο καλλιτέχνη).
Η εκκένωση του πεδίου 'Νέος καλλιτέχνης' απενεργοποιεί το κουμπί 'Προσθήκη' (το ίδιο ισχύει για τραγούδια για έναν συγκεκριμένο καλλιτέχνη).
Κάνοντας κλικ στο όνομα ενός καλλιτέχνη εμφανίζονται τα τραγούδια τους στα δεξιά.
Κάνοντας κλικ στα αστέρια βαθμολογείται ένα συγκεκριμένο τραγούδι.

Έχουμε πολύ δρόμο να κάνουμε αυτό το έργο, οπότε ας ξεκινήσουμε.

Διαδρομές: το κλειδί για την εφαρμογή Ember.js

Ένα από τα διακριτικά χαρακτηριστικά του Ember είναι η μεγάλη έμφαση που δίνει στα URL. Σε πολλά άλλα πλαίσια, η ύπαρξη ξεχωριστών διευθύνσεων URL για ξεχωριστές οθόνες είτε λείπει είτε αντιμετωπίζεται ως μεταγενέστερη σκέψη. Στο Ember, ο δρομολογητής - το στοιχείο που διαχειρίζεται τις διευθύνσεις url και τις μεταβάσεις μεταξύ τους - είναι το κεντρικό κομμάτι που συντονίζει την εργασία μεταξύ δομικών μονάδων. Κατά συνέπεια, είναι επίσης το κλειδί για την κατανόηση των εσωτερικών λειτουργιών των εφαρμογών Ember.

Εδώ είναι οι διαδρομές για την εφαρμογή μας:

App.Router.map(function() { this.resource('artists', function() { this.route('songs', { path: ':slug' }); }); });

Ορίζουμε μια διαδρομή πόρου, artists και a songs διαδρομή μέσα σε αυτό. Αυτός ο ορισμός θα μας δώσει τις ακόλουθες διαδρομές:

Χρησιμοποίησα το υπέροχο πρόσθετο Ember Inspector (υπάρχει και για τα δύο Χρώμιο και Firefox ) για να σας δείξουμε τις δημιουργούμενες διαδρομές με έναν ευανάγνωστο τρόπο. Ακολουθούν οι βασικοί κανόνες για τις διαδρομές Ember, τους οποίους μπορείτε να επαληθεύσετε για τη συγκεκριμένη περίπτωση με τη βοήθεια του παραπάνω πίνακα:

Υπάρχει μια σιωπηρή application Διαδρομή.

Αυτό ενεργοποιείται για όλα αιτήματα (μεταβάσεις).
Υπάρχει μια σιωπηρή index Διαδρομή.

Αυτό εισάγεται όταν ο χρήστης πλοηγείται στη ρίζα της εφαρμογής.
Κάθε διαδρομή πόρου δημιουργεί μια διαδρομή με το ίδιο όνομα και δημιουργεί σιωπηρά μια διαδρομή ευρετηρίου κάτω από αυτήν.

Αυτή η διαδρομή ευρετηρίου ενεργοποιείται όταν ο χρήστης πλοηγεί στη διαδρομή. Στην περίπτωσή μας, artists.index ενεργοποιείται όταν ο χρήστης πλοηγεί στο /artists.
Μια απλή (χωρίς πόρους), ένθετη διαδρομή θα έχει το πρόθεμα της μητρικής της διαδρομής.

Η διαδρομή που ορίσαμε ως this.route('songs', ...) θα έχει artists.songs ως το όνομά του. Ενεργοποιείται όταν ο χρήστης πλοηγείται στο /artists/pearl-jam ή /artists/radiohead.
Εάν η διαδρομή δεν έχει δοθεί, θεωρείται ότι είναι ίση με το όνομα της διαδρομής.
Εάν η διαδρομή περιέχει ένα :, θεωρείται ένα δυναμικό τμήμα .

Το όνομα που του αποδίδεται (στην περίπτωσή μας, slug) θα ταιριάζει με την τιμή στο κατάλληλο τμήμα της διεύθυνσης URL. Το slug Το παραπάνω τμήμα θα έχει την τιμή pearl-jam, radiohead ή οποιαδήποτε άλλη τιμή που εξήχθη από τη διεύθυνση URL.

Εμφάνιση της λίστας των καλλιτεχνών

Ως πρώτο βήμα, θα δημιουργήσουμε την οθόνη που εμφανίζει τη λίστα των καλλιτεχνών στα αριστερά. Αυτή η οθόνη πρέπει να εμφανίζεται στους χρήστες όταν πλοηγούνται στο /artists/:

Για να καταλάβετε πώς αποδίδεται αυτή η οθόνη, ήρθε η ώρα να εισαγάγετε μια άλλη γενική αρχή σχεδιασμού Ember: σύμβαση σχετικά με τη διαμόρφωση . Στην παραπάνω ενότητα, είδαμε ότι /artists ενεργοποιεί το artists Διαδρομή. Κατά συνθήκη, το όνομα αυτής της διαδρομής αντικείμενο είναι ArtistsRoute. Είναι ευθύνη αυτού του αντικειμένου διαδρομής να συγκεντρώσει δεδομένα για την απόδοση της εφαρμογής. Αυτό συμβαίνει στο μοντέλο γάντζου της διαδρομής:

App.ArtistsRoute = Ember.Route.extend({ model: function() { var artistObjects = []; Ember.$.getJSON('http://localhost:9393/artists', function(artists) { artists.forEach(function(data) { artistObjects.pushObject(App.Artist.createRecord(data)); }); }); return artistObjects; } });

Σε αυτό το απόσπασμα, τα δεδομένα ανακτώνται μέσω μιας κλήσης XHR από το back-end και - μετά τη μετατροπή σε ένα μοντέλο μοντέλου - ωθούνται σε έναν πίνακα που μπορούμε στη συνέχεια να εμφανίσουμε. Ωστόσο, οι ευθύνες της διαδρομής δεν επεκτείνονται στην παροχή λογικής οθόνης, την οποία χειρίζεται ο ελεγκτής. Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ.

Χμμμ - στην πραγματικότητα, δεν χρειάζεται να ορίσουμε τον ελεγκτή σε αυτό το σημείο! Το Ember είναι αρκετά έξυπνο για να δημιουργήσει τον ελεγκτή όταν χρειαστεί και ορίστε το χειριστήριο M.odel χαρακτηριστικό στην τιμή επιστροφής του ίδιου του μοντέλου, δηλαδή στη λίστα των καλλιτεχνών. (Και πάλι, αυτό είναι αποτέλεσμα του παραδείγματος «convention over configuration».) Μπορούμε να κατεβάσουμε ένα επίπεδο κάτω και να δημιουργήσουμε ένα πρότυπο για να εμφανιστεί η λίστα:

 {{#each model}} {{#link-to 'artists.songs' this class='list-group-item artist-link'}} {{name}}  {{/link-to}} {{/each}} {{outlet}}

Αν αυτό φαίνεται οικείο, οφείλεται στο ότι το Ember.js χρησιμοποιεί Τιμόνι πρότυπα, τα οποία έχουν μια πολύ απλή σύνταξη και βοηθοί, αλλά δεν επιτρέπουν μη τετριμμένη λογική (π.χ. όρους ORing ή ANDing υπό όρους).

Στο παραπάνω πρότυπο, επαναλαμβάνουμε το μοντέλο (ρυθμίστηκε νωρίτερα από τη διαδρομή σε έναν πίνακα που περιέχει όλους τους καλλιτέχνες) και για κάθε στοιχείο σε αυτό, δίνουμε έναν σύνδεσμο που μας οδηγεί στο artists.songs διαδρομή για αυτόν τον καλλιτέχνη. Ο σύνδεσμος περιέχει το όνομα καλλιτέχνη. Το #each Το helper στο Handlebars αλλάζει το πεδίο εφαρμογής του στο τρέχον στοιχείο, οπότε {{name}} θα αναφέρεται πάντα στο όνομα του καλλιτέχνη που βρίσκεται υπό επανάληψη.

Ένθετες διαδρομές για ένθετες προβολές

Ένα άλλο σημείο ενδιαφέροντος για το παραπάνω απόσπασμα: {{outlet}}, το οποίο καθορίζει θέσεις για το πρότυπο όπου μπορεί να αποδίδεται περιεχόμενο. Κατά την τοποθέτηση διαδρομών, το πρότυπο για την εξωτερική, διαδρομή πόρων αποδίδεται πρώτα, ακολουθούμενο από την εσωτερική διαδρομή, η οποία καθιστά το περιεχόμενο του προτύπου στο {{outlet}} ορίζεται από την εξωτερική διαδρομή. Αυτό ακριβώς συμβαίνει εδώ.

Κατά συνθήκη, όλες οι διαδρομές αποδίδουν το περιεχόμενό τους στο πρότυπο του ίδιου ονόματος. Πάνω, το data-template-name Το χαρακτηριστικό του παραπάνω προτύπου είναι artists που σημαίνει ότι θα αποδίδεται για την εξωτερική διαδρομή, artists. Καθορίζει μια διέξοδο για το περιεχόμενο του δεξιού πλαισίου, στην οποία η εσωτερική διαδρομή, artists.index αποδίδει το περιεχόμενό του:

Select an artist.

Συνοπτικά, μία διαδρομή (artists) αποδίδει το περιεχόμενό της στην αριστερή πλευρική γραμμή, με το μοντέλο να είναι η λίστα των καλλιτεχνών. Μια άλλη διαδρομή, artists.index αποδίδει το δικό του περιεχόμενο στην υποδοχή που παρέχεται από το artists πρότυπο. Θα μπορούσε να πάρει μερικά δεδομένα για να χρησιμοποιηθεί ως μοντέλο του, αλλά σε αυτήν την περίπτωση το μόνο που θέλουμε να εμφανίσουμε είναι στατικό κείμενο, οπότε δεν χρειάζεται.

Σχετίζεται με: 8 βασικές ερωτήσεις συνέντευξης Ember.js

Δημιουργήστε έναν καλλιτέχνη

Μέρος 1: Δεσμευτικά δεδομένα

Στη συνέχεια, θέλουμε να είμαστε σε θέση να δημιουργήσουμε καλλιτέχνες, όχι μόνο να δούμε μια βαρετή λίστα.

Όταν έδειξα ότι artists πρότυπο που δίνει τη λίστα των καλλιτεχνών, εξαπάτησα λίγο. Έκοψα το πάνω μέρος για να επικεντρωθώ σε αυτό που είναι σημαντικό. Τώρα, θα το προσθέσω ξανά:

{{input type='text' class='new-artist' placeholder='New Artist' value=newName}} Add ...

Χρησιμοποιούμε ένα βοηθητικό πρόγραμμα Ember, input, με κείμενο τύπου για να κάνουμε μια απλή εισαγωγή κειμένου. Σε αυτό, εμείς δένω η τιμή της εισαγωγής κειμένου στο newName ιδιότητα του ελεγκτή που δημιουργεί αντίγραφα ασφαλείας αυτού του προτύπου, ArtistsController. Κατά συνέπεια, όταν αλλάζει η ιδιότητα τιμής της εισαγωγής (με άλλα λόγια, όταν ο χρήστης πληκτρολογεί κείμενο σε αυτήν) η newName η ιδιότητα στον ελεγκτή θα διατηρηθεί συγχρονισμένη.

Γνωρίζουμε επίσης ότι το createArtist Η ενέργεια πρέπει να ενεργοποιηθεί όταν κάνετε κλικ στο κουμπί. Τέλος, συνδέουμε την απενεργοποιημένη ιδιότητα του κουμπιού στο disabled ιδιοκτησία του ελεγκτή. Πώς είναι λοιπόν ο ελεγκτής;

App.ArtistsController = Ember.ArrayController.extend({ newName: '', disabled: function() { return Ember.isEmpty(this.get('newName')); }.property('newName') });

newName έχει οριστεί ως άδεια στην αρχή που σημαίνει ότι η εισαγωγή κειμένου θα είναι κενή. (Θυμάστε τι είπα για δεσμεύσεις; Προσπαθήστε να αλλάξετε newName και να δείτε ότι αντικατοπτρίζεται ως το κείμενο στο πεδίο εισαγωγής.)

disabled υλοποιείται έτσι ώστε όταν δεν υπάρχει κείμενο στο πλαίσιο εισαγωγής, θα επιστρέψει true και έτσι το κουμπί θα απενεργοποιηθεί. Το .property Η κλήση στο τέλος το καθιστά αυτό «υπολογισμένη ιδιοκτησία», μια άλλη νόστιμη φέτα του κέικ Ember.

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

Ακολουθεί μια οπτική αναπαράσταση της παραπάνω διαδικασίας. Συνοψίζοντας: όταν ο χρήστης εισάγει ένα όνομα καλλιτέχνη, το newName ενημερώσεις ιδιοτήτων, ακολουθούμενη από το disabled ιδιοκτησία και, τέλος, το όνομα του καλλιτέχνη προστίθεται στη λίστα.

Παράκαμψη: Μια μοναδική πηγή αλήθειας

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

Όσο μεγαλύτερο είναι το σύστημα, τόσο περισσότερη μόχλευση κερδίζουμε από την αρχή της «ενιαίας πηγής αλήθειας». Διατηρεί τον κώδικα καθαρό και στιβαρό, και τους ορισμούς ιδιοκτησίας μας, πιο δηλωτικούς.

Ορισμένα άλλα πλαίσια δίνουν επίσης έμφαση στο να έχουν τα μοντέλα δεδομένα τη μοναδική πηγή αλήθειας, αλλά είτε δεν φτάνουν μέχρι το Ember ή δεν καταφέρνουν να κάνουν μια τόσο καλή δουλειά. Η γωνιακή, για παράδειγμα, έχει αμφίδρομες συνδέσεις - αλλά δεν έχει υπολογιστικές ιδιότητες. Μπορεί να «μιμηθεί» υπολογισμένες ιδιότητες μέσω απλών λειτουργιών. Το πρόβλημα εδώ είναι ότι δεν έχει κανέναν τρόπο να γνωρίζει πότε να ανανεώνει μια «υπολογισμένη ιδιότητα» και επομένως καταφεύγει σε βρώμικο έλεγχο και, με τη σειρά του, οδηγεί σε απώλεια απόδοσης, ιδιαίτερα αξιοσημείωτη σε μεγαλύτερες εφαρμογές.

Εάν θέλετε να μάθετε περισσότερα για το θέμα, σας προτείνω να διαβάσετε δημοσίευση στο blog του badtrout για μικρότερη έκδοση ή αυτή η ερώτηση Quora για μια μακρύτερη συζήτηση στην οποία οι βασικοί προγραμματιστές και από τις δύο πλευρές ζυγίζουν.

Μέρος 2: Χειριστές δράσης

Ας επιστρέψουμε για να δούμε πώς το createArtist η ενέργεια δημιουργείται μετά την ενεργοποίησή της (ακολουθώντας το πάτημα του κουμπιού):

App.ArtistsRoute = Ember.Route.extend({ ... actions: { createArtist: function() { var name = this.get('controller').get('newName'); Ember.$.ajax('http://localhost:9393/artists', { type: 'POST', dataType: 'json', data: { name: name }, context: this, success: function(data) { var artist = App.Artist.createRecord(data); this.modelFor('artists').pushObject(artist); this.get('controller').set('newName', ''); this.transitionTo('artists.songs', artist); }, error: function() { alert('Failed to save artist'); } }); } } });

Οι χειριστές δράσης πρέπει να είναι τυλιγμένοι σε actions αντικείμενο και μπορεί να οριστεί στη διαδρομή, τον ελεγκτή ή την προβολή. Επέλεξα να το ορίσω στη διαδρομή εδώ γιατί το αποτέλεσμα της δράσης δεν περιορίζεται στον ελεγκτή αλλά μάλλον «παγκόσμιο».

Δεν υπάρχει τίποτα φανταχτερό να συμβαίνει εδώ. Αφού το back-end μας ενημέρωσε ότι η λειτουργία εξοικονόμησης ολοκληρώθηκε με επιτυχία, κάνουμε τρία πράγματα, προκειμένου:

Προσθέστε τον νέο καλλιτέχνη στο μοντέλο του προτύπου (όλοι οι καλλιτέχνες) έτσι ώστε να αποδίδεται εκ νέου και ο νέος καλλιτέχνης εμφανίζεται ως το τελευταίο στοιχείο της λίστας.
Διαγράψτε το πεδίο εισαγωγής μέσω του newName δεσμευτική, μας σώζει από το να χρειαστεί να χειριστούμε άμεσα το DOM.
Μετάβαση σε μια νέα διαδρομή (artists.songs), περνώντας στον πρόσφατα δημιουργημένο καλλιτέχνη ως μοντέλο για αυτήν τη διαδρομή. transitionTo είναι ο τρόπος μετακίνησης μεταξύ διαδρομών εσωτερικά. (Ο βοηθός link-to χρησιμεύει για να το κάνει αυτό μέσω της ενέργειας του χρήστη.)

Εμφάνιση τραγουδιών για έναν καλλιτέχνη

Μπορούμε να εμφανίσουμε τα τραγούδια για έναν καλλιτέχνη είτε κάνοντας κλικ στο όνομα του καλλιτέχνη. Περνάμε επίσης στον καλλιτέχνη που πρόκειται να γίνει το μοντέλο της νέας διαδρομής. Εάν το αντικείμενο του μοντέλου περάσει έτσι, το model Το άγκιστρο της διαδρομής δεν θα κληθεί αφού δεν χρειάζεται να επιλυθεί το μοντέλο.

Η ενεργή διαδρομή εδώ είναι artists.songs και έτσι ο ελεγκτής και το πρότυπο θα είναι ArtistsSongsController και artists/songs, αντίστοιχα. Έχουμε ήδη δει πώς αποδίδεται το πρότυπο στην έξοδο που παρέχεται από το artists πρότυπο, ώστε να μπορούμε να επικεντρωθούμε μόνο στο πρότυπο:

(...) {{#each songs}} {{title}} {{view App.StarRating maxRating=5}} {{/each}}

Σημειώστε ότι έβγαλα τον κώδικα για να δημιουργήσω ένα νέο τραγούδι, καθώς θα ήταν ακριβώς το ίδιο με αυτό για τη δημιουργία ενός νέου καλλιτέχνη.

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

Ο τίτλος εμφανίζεται απευθείας στο πρότυπο και η βαθμολογία αντιπροσωπεύεται από αστέρια, μέσω του StarRating θέα. Ας το δούμε τώρα.

Η βαθμολογία ενός τραγουδιού κυμαίνεται μεταξύ 1 και 5 και εμφανίζεται στον χρήστη μέσω προβολής, App.StarRating. Οι προβολές έχουν πρόσβαση στο περιβάλλον τους (σε αυτήν την περίπτωση, το τραγούδι) και στον ελεγκτή τους. Αυτό σημαίνει ότι μπορούν να διαβάσουν και να τροποποιήσουν τις ιδιότητές του. Αυτό έρχεται σε αντίθεση με ένα άλλο δομικό στοιχείο Ember, στοιχεία, τα οποία είναι απομονωμένα, επαναχρησιμοποιήσιμα χειριστήρια με πρόσβαση μόνο σε όσα έχουν περάσει σε αυτά. (Θα μπορούσαμε επίσης να χρησιμοποιήσουμε ένα στοιχείο αξιολόγησης αστεριών σε αυτό το παράδειγμα.)

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

σε τι χρησιμοποιείται το nodejs

App.StarRating = Ember.View.extend({ classNames: ['rating-panel'], templateName: 'star-rating', rating: Ember.computed.alias('context.rating'), fullStars: Ember.computed.alias('rating'), numStars: Ember.computed.alias('maxRating'), stars: function() { var ratings = []; var fullStars = this.starRange(1, this.get('fullStars'), 'full'); var emptyStars = this.starRange(this.get('fullStars') + 1, this.get('numStars'), 'empty'); Array.prototype.push.apply(ratings, fullStars); Array.prototype.push.apply(ratings, emptyStars); return ratings; }.property('fullStars', 'numStars'), starRange: function(start, end, type) { var starsData = []; for (i = start; i <= end; i++) { starsData.push({ rating: i, full: type === 'full' }); }; return starsData; }, (...) });

rating, fullStars και numStars είναι υπολογισμένες ιδιότητες που συζητήσαμε προηγουμένως με το disabled ιδιοκτησία του ArtistsController. Πάνω, χρησιμοποίησα τη λεγόμενη μακροεντολή υπολογισμένης ιδιότητας, περίπου δώδεκα από τις οποίες ορίζονται στο Ember. Κάνουν τις τυπικές υπολογιστικές ιδιότητες πιο σύντομες και λιγότερο επιρρεπείς σε σφάλματα (για εγγραφή). Έχω ορίσει rating να είναι η βαθμολογία του περιβάλλοντος (και συνεπώς του τραγουδιού), ενώ ορίζω τόσο το fullStars και numStars ιδιότητες, ώστε να διαβάζονται καλύτερα στο πλαίσιο του γραφικού στοιχείου αξιολόγησης αστεριών.

Το stars η μέθοδος είναι η κύρια έλξη. Επιστρέφει μια σειρά δεδομένων για τα αστέρια στα οποία κάθε στοιχείο περιέχει ένα rating ιδιότητα (από 1 έως 5) και μια σημαία (full) για να δείξει εάν το αστέρι είναι γεμάτο. Αυτό το καθιστά εξαιρετικά απλό να τα διαβάσετε στο πρότυπο:

{{#each view.stars}} {{/each}}

Αυτό το απόσπασμα περιέχει πολλά σημεία σημείωσης:

Πρώτον, το each Το helper δηλώνει ότι χρησιμοποιεί μια ιδιότητα προβολής (σε αντίθεση με μια ιδιότητα στον ελεγκτή) προθέτοντας το όνομα της ιδιότητας με view.
Δεύτερον, το class Το χαρακτηριστικό της ετικέτας span έχει αναμίξει δυναμικές και στατικές τάξεις. Οτιδήποτε προθετείται από ένα : γίνεται στατική τάξη, ενώ η full:glyphicon-star:glyphicon-star-empty Η σημειογραφία είναι σαν ένας τριμελής χειριστής σε JavaScript: εάν η πλήρης ιδιότητα είναι αληθινή, πρέπει να εκχωρηθεί η πρώτη τάξη. αν όχι, το δεύτερο.
Τέλος, όταν κάνετε κλικ στην ετικέτα, το setRating η δράση πρέπει να ενεργοποιηθεί - αλλά ο Ember θα το κοιτάξει στην προβολή, όχι στη διαδρομή ή στον ελεγκτή, όπως στην περίπτωση δημιουργίας νέου καλλιτέχνη.

Η ενέργεια ορίζεται έτσι στην προβολή:

App.StarRating = Ember.View.extend({ (...) actions: { setRating: function() { var newRating = $(event.target).data('rating'); this.set('rating', newRating); } } });

Παίρνουμε την βαθμολογία από το rating χαρακτηριστικό δεδομένων που εκχωρήσαμε στο πρότυπο και στη συνέχεια το ορίσαμε ως rating για το τραγούδι. Σημειώστε ότι η νέα βαθμολογία δεν παραμένει στο back-end. Δεν θα ήταν δύσκολο να εφαρμοστεί αυτή η λειτουργικότητα με βάση το πώς δημιουργήσαμε έναν καλλιτέχνη και αφήνεται ως άσκηση για τον παρακινημένο αναγνώστη.

Τυλίγοντας τα όλα

Έχουμε δοκιμάσει διάφορα συστατικά του προαναφερθέντος κέικ Ember:

Έχουμε δει πώς οι διαδρομές είναι το επίκεντρο των εφαρμογών Ember και πώς χρησιμεύουν ως βάση των συμβάσεων ονομασίας.
Έχουμε δει πώς οι αμφίδρομες δεσμεύσεις δεδομένων και οι υπολογιστικές ιδιότητες κάνουν τα δεδομένα μοντέλου μας τη μοναδική πηγή αλήθειας και μας επιτρέπουν να αποφύγουμε τον άμεσο χειρισμό DOM.
Και έχουμε δει πώς να ενεργοποιήσουμε και να χειριστούμε ενέργειες με διάφορους τρόπους και να δημιουργήσουμε μια προσαρμοσμένη προβολή για να δημιουργήσουμε ένα στοιχείο ελέγχου που είναι δεν μέρος του HTML μας.

Ωραίο, έτσι δεν είναι;

Περαιτέρω ανάγνωση (και παρακολούθηση)

Υπάρχουν πολύ περισσότερα για τον Ember από ό, τι θα μπορούσα να χωρέσω μόνο σε αυτήν την ανάρτηση. Εάν θέλετε να δείτε μια σειρά screencast σχετικά με τον τρόπο με τον οποίο δημιούργησα μια κάπως πιο ανεπτυγμένη έκδοση της παραπάνω εφαρμογής ή / και να μάθετε περισσότερα για το Ember, μπορείτε να εγγραφείτε στη λίστα αλληλογραφίας μου να λαμβάνετε άρθρα ή συμβουλές σε εβδομαδιαία βάση.

Ελπίζω να ξεχάσω την όρεξή σας για να μάθω περισσότερα για το Ember.js και ότι προχωράτε πολύ πέρα από το δείγμα εφαρμογής που έχω χρησιμοποιήσει σε αυτήν την ανάρτηση. Καθώς συνεχίζετε να μαθαίνετε για το Ember.js, φροντίστε να ρίξετε μια ματιά στο άρθρο σχετικά με το Ember Data για να μάθετε πώς να χρησιμοποιείτε τη βιβλιοθήκη δεδομένων ember . Καλή διασκέδαση!

Σχετίζεται με: Ember.js και τα 8 πιο συνηθισμένα λάθη που κάνουν οι προγραμματιστές