Portuguese (Português) translation by Erick Patrick (you can also view the original English article)
Antes de tudo, bem vindo ao final da série!
Na parte anterior, mostramos como adicionar uma nova função ao blog: adicionar comentários. É uma funcionalidade autônoma. Hoje, mostraremos como adicionar categorias ao sistema de blog. É uma tarefa mais difícil, já que será mais atrelada ao código existente.
Modelo da Categoria
Passo 1: Classe da Categoria
Sabe como é: o modelo sempre vem antes. Uma nova classe no Parse.com: a classe Category. Deve ser simples. Apenas precisamos um campo personalizado:
- string
name
Criemos duas categorias falsas para facilitar o teste:
Passo 2: Campo Cateogira na Tabela da Classe Blog
Agora, adicionemos uma nova coluna na tabela da classe Blog no Parse.com e apontemo-na para Category.
Também vinculemo-nos a várias publicações do blog.
Passo 3: Objeto Comentário
Agora, o objeto Comment no blog.js. Novamente, é bem simples.
Category = Parse.Object.extend('Category', {});
Passo 4: Coleção de Comentários
E a coleção:
Categories = Parse.Collection.extend({
model: Category
})
Adicionando um Menu Suspenso de Categoria no Formulário de Criação de Publicações
Passo 1: Buscando Categorias
Como nos comentários, busquemos as categories ao renderizar WriteBlogView.
render: function(){
...
var self = this,
categories = new Categories();
categories.fetch().then(function(categories){
attributes.categories = categories.toJSON();
self.$el.html(this.template(attributes)).find('.write-content').wysihtml5();
});
}
Passo 2: Encontremos a Categoria Atual
Agora, precisamos encontrar a categoria atual ao existir uma categoria para a publicação em edição. Podemos apenas iterar pelo vetor attribute.categories e configurar selected como TRUE para a categoria atual.
categories.fetch().then(function(categories){
attributes.categories = categories.toJSON();
// Get current selected category
if (attributes.category) {
attributes.categories.forEach(function(category, i){
if (category == attributes.category) {
attributes.categories[i].selected = true;
}
});
}
console.log(attributes);
self.$el.html(self.template(attributes)).find('.write-content').wysihtml5();
});
Passo 3: Rendizando Categorias no Menu Suspenso
E no HTML, renderizemos as categorias num menu <select>:
<div class="form-group">
<label for="category">Category</label>
<select>
{{#each categories}}
<option value="{{objectId}}" {{#if selected}}selected{{/if}}>{{name}}</option>
{{/each}}
</select>
</div>
Passo 4: Salvemos a Categoria Selecionada
Agora, salvemo-na na função submit() em WriteBlogView:
submit: function(e) {
...
this.model.update({
title: data[0].value,
category: data[1].value,
summary: data[2].value,
content: data[3].value
});
}
E adicionemo-na na função Blog.update() :
Blog = Parse.Object.extend('Blog', {
update: function(data) {
...
var category = new Category();
category.id = data.category;
this.set({
'title': data.title,
'category': category,
...
}).save(null, {
...
});
}
})
Percebamos que não podemos apenas usr o id da categoria, mas podemos criar uma nova instância de category e configurar o id para o id da categoria que recebemos do formulário.
Testemos e esperemos que tudo esteja funcionando e salvo na base de dados:
Páginas de Categoria
Agora, vejamos como criar uma barra lateral que vincula a diferentes categorias.
Passo 1: Limpando e Criando um Modelo
Primeiro, removamos o HTML estático da barra lateral:
<div class="col-sm-3 col-sm-offset-1 blog-sidebar"></div>
E criemos um novo modelo de div para o modelo do menu da categoria:
<script id="categories-tpl" type="text/x-handlebars-template">
<div class="sidebar-module">
<h4>Categories</h4>
<ol class="list-unstyled">
{{#each category}}
<li><a href="#/category/{{objectId}}">{{name}}</a></li>
{{/each}}
</ol>
</div>
</script>
Passo 2: CategoriesView
Então, criemos uma Visão para a lista de categorias:
CategoriesView = Parse.View.extend({
template: Handlebars.compile($('#categories-tpl').html()),
render: function() {
var collection = { category: this.collection.toJSON() };
this.$el.html(this.template(collection));
}
})
Passo 3: Renderizando CategoriesView
Como a lista de categorias está em todas as páginas, podemos criar uma variável compartilhada BlogRouter.initialize():
initialize: function(options){
this.blogs = new Blogs();
this.categories = new Categories();
}
E renderizá-la na função .start() :
start: function(){
...
this.categories.fetch().then(function(categories){
var categoriesView = new CategoriesView({ collection: categories });
categoriesView.render();
$('.blog-sidebar').html(categoriesView.el);
});
}
Testemos e vejamos que ela renderiza:
Por termos, agora, uma variável compartilhada, podemos usá-la em WriteBlogView.render():
Passo 4: Adicionando um Roteador
Agora precisamos fazer /category/{{objectId}} funcionar.
Adicionarmos o padrão de roteameto primeiro:
routes: {
...
'category/:id': 'category'
}
Agora, criemos a função category. É bem direta, apenas a combinação das coisas que aprendemos até agora.
category: function(id) {
// Get the current category object
var query = new Parse.Query(Category);
query.get(id, {
success: function(category) {
// Query to get the blogs under that category
var blogQuery = new Parse.Query(Blog).equalTo("category", category).descending('createdAt');
collection = blogQuery.collection();
// Fetch blogs
collection.fetch().then(function(blogs){
// Render blogs
var blogsView = new BlogsView({ collection: blogs });
blogsView.render();
$container.html(blogsView.el);
});
},
error: function(category, error) {
console.log(error);
}
});
}
Agora, tudo está funcionando.
Conclusão
Wow, não acredto que levamos tanto tempo para terminar essa série. Nas últimas dez seções, aprendemos sobre Parse.js e desenvolvimento web em geral. Juntos, construímos um sistema de blog completo: adição, edição, remoção, login, comentários e categorias.
Esperamos que tenha curtido a série. Compartilhe seu feedback, sugestões e conteúdos que gostariam que fossem cobertos no futuro. E se tiver criado qualquer projeto web usando essas técnicas do tutorial, gostaríamos de saber sobre ele.
