Commencez à construire votre blog avec Parse.js Router

Ce que vous allez créer

Lors de la dernière session, nous avons créé la fonction "Ajouter un nouveau blog" et les utilisateurs peuvent désormais publier dans le système de blog. Une extension naturelle serait de permettre aux utilisateurs de modifier et de supprimer des blogs existants. Au cours de cette session, nous allons préparer le terrain pour ces fonctions, en créant une liste des blogs dans la page d’administration et en ajoutant un routeur (si vous ne savez pas ce qu’est un routeur, cette session est faite pour vous)..

1. Créer et rendre BlogsAdminView

Étape 1: modèle HTML

Comme d’habitude, commençons par ajouter un modèle HTML à admin.html. Cela devrait être assez facile pour vous maintenant, vraiment semblable à # blogs-tpl dans index.html. La seule différence est que nous faisons un tableau cette fois-ci: 

Étape 2: Créer une classe BlogsAdminView

De même, créez un BlogsAdminView dans admin.js. Si vous ne les connaissez pas, je vous recommande fortement de consulter mes précédents messages..

var Blogs = Parse.Collection.extend (modèle: Blog), BlogsAdminView = Parse.View.extend (template: Handlebars.compile ($ ('# blogs-admin-tpl'). html ()), restituer: function () var collection = blog: this.collection.toJSON (); this. $ el.html (this.template (collection)););

Étape 3: Rendre BlogsAdminView

Pour voir la liste, il faut la rendre. Ajoutons-le simplement à la rendre() fonctionner dans BienvenueVoir pour l'instant:

render: function () var attributs = this.model.toJSON (); this. $ el.html (this.template (attributs)); var blogs = nouveaux blogs (); blogs.fetch (succès: fonction (blogs) var varAdminView = nouveau BlogsAdminView (collection: blogs); blogsAdminView.render (); $ ('. conteneur principal'). append (blogsAdminView.el);, error: function (blogs, error) console.log (error);); 

Consultez la page d’administration et vous verrez une liste sous le menu Ajouter un nouveau blog bouton.

2. routeur

Si vous suivez, j'espère que vous vous sentirez maintenant à l'aise d'écrire et de lire dans la base de données. Vous devriez également trouver qu'il est facile de créer et de rendre des vues pour présenter les données que vous obtenez. Cependant, vous pouvez commencer à penser qu’il pourrait y avoir trop de View.render () des fonctions ici et là, et elles pourraient rendre votre code difficile à lire et à maintenir. Vous pouvez aussi vous sentir mal en voyant admin.html dans l'URL. 

En pensant à la fonction d'édition que nous allons créer, nous pouvons certainement la construire en ajoutant des événements et en transmettant le blog que nous voulons éditer sous forme d'objet, puis en le rendant. Mais ne serait-il pas formidable si nous pouvons avoir quelque chose comme http://AnExampleDomain.net/edit/id? L'idée d'un routeur va nous aider à atteindre cet objectif. C'est un moyen de mapper des fonctions à des URL. 

Étape 1: Ajouter la structure du routeur

Pour vous aider à apprendre ce concept, pourquoi ne pas simplement lancer un nouveau routeur dans admin.js:

var BlogRouter = Parse.Router.extend (// Ici vous pouvez définir des variables partagées initialize: function (options) this.blogs = new Blogs ();, // Ceci s’exécute au démarrage du routeur. Laissez-le simplement pour le moment. start: function () Parse.history.start (pushState: true);, // C'est ici que vous mappez les fonctions sur des URL. // Ajoutez simplement 'pattern URL': ' nom de la fonction 'routes: ' admin ':' admin ',' login ':' login ',' add ':' add ',' edit /: url ':' edit ', admin: function () , login: function () , ajouter: function () , éditer: function (url) ), blogRouter = new BlogRouter (); blogRouter.start (); 

Comme vous pouvez le constater, il est facile de mapper les modèles d’URL sur les fonctions d’un routeur et de le démarrer. Maintenant, si un utilisateur visite / admin, il va déclencher la admin () une fonction. 

Notez que vous pouvez même prendre des paramètres dans les URL en ajoutant deux points avant un nom de variable, comme modifier /: url dans le code ci-dessus.

Maintenant, prenons quelques mesures pour réorganiser notre code existant dans le routeur..

Étape 2: Page / login

Le plus facile devrait être le /s'identifier page. Il suffit de déplacer le code de rendu dans la s'identifier() une fonction:

login: function () var loginView = new LoginView (); loginView.render (); $ ('. main-container'). html (loginView.el); 

Étape 3: Page / admin

Ensuite, écrivons une fonction pour le / admin page. Auparavant, lorsque les utilisateurs visitaient /admin.html, nous les avons envoyés à l'écran de connexion par défaut. Et s’ils se sont connectés avec succès, nous les avons ensuite envoyés à l’écran de bienvenue. La fonction de rendu pour bienvenueVoir était dans le rappel de succès. Ce n'est pas la meilleure façon d'organiser votre code, et ce n'est pas pratique pour votre utilisateur.

Alors maintenant, faisons juste une vérification sur la / admin page. S'ils sont connectés, nous leur montrons la page d'accueil et s'ils ne le sont pas, nous les redirigeons vers /s'identifier.

admin: function () // Voici comment vous pouvez utiliser l'utilisateur actuel dans Parse var currentUser = Parse.User.current (); if (! currentUser) // Voici comment vous pouvez faire une redirection d'URL dans JS blogRouter.navigate ('login', trigger: true);  else var welcomeView = new WelcomeView (model: currentUser); welcomeView.render (); $ ('. main-container'). html (welcomeView.el); // Nous le changeons en this.blogs afin qu'il stocke le contenu d'autres vues // N'oubliez pas de le définir dans BlogRouter.initialize () this.blogs.fetch (succès: fonction (blogs) var blogsAdminView = new BlogsAdminView ( collection: blogs); blogsAdminView.render (); $ ('. conteneur principal'). append (blogsAdminView.el);, erreur: fonction (blogs, erreur) console.log (erreur);) ; 

Comme vous pouvez le voir dans le code, nous utilisons le blogRouter.navigate () fonction pour les rediriger vers le /s'identifier page. De même, changeons la fonction de rendu dans /s'identifier voir dans un blogRouter.navigate () fonctionner aussi bien:

Parse.User.logIn (nom d'utilisateur, mot de passe, // Si le nom d'utilisateur et le mot de passe correspondent à succès: function (utilisateur) blogRouter.navigate ('admin', trigger: true);, // S'il y a une erreur error: function (utilisateur, erreur) console.log (erreur);); 

N'oubliez pas de supprimer les anciennes fonctions de rendu dans le code précédent. 

Étape 4: Testez et définissez la navigation par défaut en tant que solution temporaire

Essayons ces deux fonctions. Testez et… rien! C'est parce que nous devons diriger vers / admin au début; admin.html par lui-même ne correspond à aucun modèle d'URL que nous avons défini dans le routeur.

Ajoutons un défaut pour naviguer vers le début() fonctionne de telle sorte que lorsque le routeur démarre, il entraîne automatiquement l'utilisateur à la / admin page:

start: function () Parse.history.start (pushState: true); this.navigate ('admin', trigger: true); 

Maintenant, si vous essayez, tout devrait fonctionner correctement:

Notez que vous ne pouvez toujours pas visiter directement / admin ou /s'identifier encore. Et si vous placez votre projet dans un répertoire, vous remarquerez probablement que votre URL sera redirigée de http: //localhost/directory/admin.html vers http: // localhost / admin, et cela semble bizarre. Nous couvrirons et résoudrons ces problèmes lors de sessions ultérieures. Aujourd’hui, notre objectif principal est de comprendre le fonctionnement du routeur une fois démarré et de jeter les bases.

Étape 5: / ajouter une page

Passons à autre chose, il est temps de déplacer le rendu de la page "Ajouter un nouveau blog" de BienvenueVoir au routeur.

BlogRouter = Parse.Router.extend (… add: function () var addBlogView = new AddBlogView (); addBlogView.render (); $ ('. Main-container'). Html (addBlogView.el);,… )

Nous pouvons également réécrire l'événement en BienvenueVoir pour déclencher une navigation:

WelcomeView = Parse.View.extend (template: Handlebars.compile ($ ('# welcome-tpl'). Html ()), événements: 'cliquez sur add-blog': 'ajoutez', ajoutez: fonction ( ) blogRouter.navigate ('add', trigger: true);, render: function () var attributs = this.model.toJSON (); this. $ el.html (this.template (attributs)) ;)

Maintenant, vérifiez et assurez-vous que tout fonctionne.

Conclusion

Au cours de cette session, nous avons créé une autre liste de blogs dans le panneau d'administration et vous avez découvert le concept important de routeur. J'espère maintenant qu'il vous semble naturel de créer et de rendre des vues avec Parse.js. Et vous avez commencé à voir comment un routeur peut nous aider à organiser et à réutiliser notre code.

Nous n’avons pas fouillé dans les détails de la mécanique du routeur, comme comprendre pourquoi nous devons avoir trigger: true. Comme je l'ai déjà mentionné, l'objectif de ce tutoriel est de vous montrer comment faire fonctionner les choses. Mais si vous souhaitez en savoir plus, consultez la documentation. Nous couvrirons également plus de connaissances de routeur lorsque nous en aurons besoin plus tard dans la série.

À la prochaine session, nous allons créer un /modifier page, et mettez le routeur à la vraie utilisation. J'espère que vous avez hâte de réussir. Nous allons bientôt tout rassembler, alors restez à l'écoute!