Commencez à construire votre blog avec Parse.js Catégories

Ce que vous allez créer

Tout d’abord, bienvenue dans le final de cette série de tutoriels!

Lors de la dernière session, je vous ai montré comment ajouter une nouvelle fonction au blog: ajouter des commentaires. C'est à peu près une fonctionnalité autonome. Cette session, je vais vous montrer comment ajouter des catégories à votre système de blog. C'est une tâche plus difficile, car son code sera plus étroitement lié au code existant..

Modèle de catégorie

Étape 1: Catégorie de classe

Vous connaissez l'exercice: le modèle vient toujours en premier. Une nouvelle classe sur Parse.com: le Catégorie classe. Cela devrait être très simple. Nous n'avons besoin que d'un seul champ personnalisé:

Chaîne prénom

Créons simplement deux catégories factices pour faciliter les tests:

Étape 2: Champ de catégorie dans la table de classes de blog

Maintenant, ajoutez une nouvelle colonne dans la table de classes Blog sur Parse.com et faites-en un pointeur sur Catégorie.

Relions-les également à plusieurs articles de blog.

Étape 3: Objet de commentaire

Ensuite, le Commentaire objet dans blog.js. Encore une fois, cela peut être très simple.

Catégorie = Parse.Object.extend ('Catégorie', );

Étape 4: Collection de commentaires

Et la collection:

Catégories = Parse.Collection.extend (model: Category)

Ajouter une liste déroulante de catégories dans le formulaire Écrire un blog

Étape 1: extraire les catégories

Comme dans les commentaires, récupérons les commentaires lorsque nous rendons WriteBlogView.

render: function () … var self = this, categories = new Catégories (); categories.fetch (). then (fonction (categories) attributs.categories = categories.toJSON (); self. $ el.html (this.template (attributs)). find ('. write-content'). wysihtml5 ( ););

Étape 2: Trouvez la catégorie actuelle

Ensuite, nous devons trouver la catégorie actuelle lorsqu'il existe une catégorie pour le message de blog que vous modifiez. Nous pouvons simplement parcourir le attribut.catégories tableau et set choisi à VRAI pour la bonne catégorie.

categories.fetch (). then (fonction (categories) attributs.categories = categories.toJSON (); // Obtenir la catégorie actuellement sélectionnée si (attributs.catégorie) attributs.catégories.forEach (fonction (catégorie, i) si (category == attributs.catégorie) attributs.catégories [i] .selected = true;); console.log (attributs); self. $ el.html (self.template (attributs)). find (' .write-content '). wysihtml5 (););

Étape 3: Rendre les catégories dans un menu déroulant

Et en HTML, les catégories de rendu dans un #each categories /chaque

  Étape 4: Enregistrez la catégorie sélectionnée
 Maintenant, enregistrons-le dans le soumettre() fonctionner dans WriteBlogView:
 submit: function (e) … this.model.update (title: data [0] .value, catégorie: data [1] .value, résumé: data [2] .value, contenu: data [3] .value );  
 Et puis dans le Blog.update () une fonction:
 Blog = Parse.Object.extend ('Blog', update: function (données) … var category = new Category (); category.id = data.category; this.set ('title': data.title, 'catégorie': catégorie,…). save (null, …); 
 Notez que vous ne pouvez pas simplement indiquer l’identifiant de la catégorie, mais vous devez en créer un nouveau. Catégorie exemple, et définissez son identifiant sur celui de la catégorie que vous obtenez à partir du formulaire.
 Faites un test et espérons que vous pourrez le voir correctement enregistré dans la base de données:
    Pages de catégorie
 Passons maintenant à la création d’une barre latérale reliant différentes catégories..
 Étape 1: Nettoyer et créer un modèle
 Tout d’abord, supprimez tout le code HTML statique de la barre latérale:
 
 
 Et puis créez un nouveau template div pour le template du menu catégorie:
  
 Étape 2: CategoriesView
 Ensuite, créez une vue pour cette liste de catégories:
 CategoriesView = Parse.View.extend (template: Handlebars.compile ($ ('# catégories-tpl'). Html ()), rendu: function () var collection = catégorie: this.collection.toJSON () ; this. $ el.html (this.template (collection));) 
 Étape 3: Rendu CategoriesView
 Comme la liste des catégories figure sur chaque page, nous pouvons créer une variable partagée dans BlogRouter.initialize ():
 initialize: function (options) this.blogs = new Blogs (); this.categories = new Catégories ();  
 Et puis le rendre dans le .début() une fonction:
 start: function () … this.categories.fetch (). then (fonction (categories) var categoriesView = nouveau CategoriesView (collection: categories); categoriesView.render (); $ ('. blog-sidebar') .html (categoriesView.el););  
 Essayez, et maintenant cela rend:
    Parce que nous avons maintenant une variable partagée, nous pouvons également l'utiliser dans WriteBlogView.render ():
 Étape 4: Ajouter un routeur
 Maintenant nous avons juste besoin de faire / catégorie / objectId travail.
 Ajoutons d'abord ce modèle de routeur:
 itinéraires: … 'category /: id': 'category' 
 Ensuite, écris le Catégorie une fonction. C'est assez simple, juste une combinaison des choses que vous avez apprises jusqu'à présent:
 category: function (id) // Récupère l'objet de la catégorie en cours var query = new Parse.Query (Category); query.get (id, succès: fonction (catégorie) // Requête pour obtenir les blogs de cette catégorie. var blogQuery = new Parse.Query (Blog) .equalTo ("category", catégorie) .descending ('createdAt') ; collection = blogQuery.collection (); // Récupération des blogs collection.fetch (). then (fonction (blogs) // Rendu de blogs var blogsView = new BlogsView (collection: blogs); blogsView.render (); $ conteneur.html (blogsView.el););, erreur: fonction (catégorie, erreur) console.log (erreur););  
 Maintenant tout fonctionne.
    Conclusion
 Wow, je ne peux pas croire qu'il m'a fallu si longtemps pour terminer toute la série. Au cours des dix dernières sessions, vous avez beaucoup appris sur Parse.js et sur le développement Web en général. Ensemble, nous avons construit un système de blog avec des fonctions complètes: ajouter, modifier, supprimer, se connecter, commenter et dans cette session, les catégories.
 J'espère que vous trouverez cette série utile. S'il vous plaît partagez avec moi vos commentaires, suggestions et contenus que vous souhaitez que je couvre à l'avenir. Et si vous réalisez des projets Web en utilisant les techniques de ce tutoriel, j'aimerais aussi les voir..



		
			
	   
	




Code