Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Aprenda a Criar um Blog Usando Parse.js: Edição

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Building Your Blog with Parse.js.
Get Started Building Your Blog With Parse.js: Router
Get Started Building Your Blog With Parse.js: Refactor

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

No artigo anterior, contruimos uma visão para administrar publicações existentes do blog e vimos a idea de roteador. Agora, é hora de construirmos uma função de edição.

1. Criando e Renderizando EditBlogView

Para construir uma função de edição, criemos EditBlogView. Isso já deve ser fácil para nós. Já fizemos muito isso.

Passo 1: Modelo HTML

Essa parte é parecida ao modelo AddBlogView. A única diferença é que, por editarmos uma publicação, preicsaremos passar o título e conteúdo correspondente.

Passo 2: EditBlogView

E, então, EditBlogView. Também é muito parecido com AddBlogView. Para esse tutorial, focaremos em como fazê-los funcionar primeiro. Na próxima seção, limparemos tudo, removendo o código duplicado. Só me acompanhe, por hora.

Dessa vez, não verificaremos se o código funciona de verdade—idealmente, já fizemos tantas vezes isso, que devemos estar confortáveis para continuar o tutorial. Como sempre, veja o artigo anterior ou deixe um comentário se não conseguir seguir.

2. Elo Entre a Página /edit e o Roteador

Agora, garantamos que /edit/ ligará e renderizará visão de edição correta.

Passo 1: /edit/:id

Da outra vez, fizemos parte da preparação. Temos o padrão da URL para a página /edit em BlogRoutes.routes:

Como podemos ver, o padrão de URL já aponta para a função BlogRouter.edit() onde temos uma função reservada para receber o parâmetro da url como entrada:

Isso significa que se visitarmos http://localhost/your-directory/edit/what-ever-you-put-here, a função BlogRouter.edit() será ativada e a variável url nessa função terá o valor what-ever-you-put-here.

Então, o que podemos colocar após /edit que poderá ajudar-nos a encontrar a publicação que queremos editar? Deveria ser o id, certo? Mudemos um pouco o código para ficar claro que estamos colocando id lá.

Passo 2: Obtendo um Blog Via seu Id

Agora que temos o id da URL, precisamos encontrar a publicação com aquele id. Para fazer isso no Parse.js é usando uma consulta:

Se quisermos saber mais sobre as consultas do Parse, basta ir à documentação.

Passo 3: Renderizando editBlogView

Finalizemos as funções success e error na consulta callback.

Para a função success, queremos renderizar editBlogView usando a publicação como modelo:

Para a função error, registraremos o erro, como sempre:

Passo 4: Elo à Página /edit

Continuando, atualizemos os links de edição em #blogs-admin-tpl para eles realmente apontarem para /edit. Também usemos uma classe única que a referenciará:

E para garantir que o roteador veja a mudança de URL (ainda não é estático), escrevamos nossa própria função de link para substituir a padrão em BlogAdminView.

Primeiro, adicionemos um evento de clique em .app-edit. Por isso precisamos de uma classe antes!

Em edit(), previnamos a ação padrão, peguemos o valor de href e usemos blogRouter.navigate() para ativá-la.

Agora podemos testá-la:

blogEditView

O teste seria um pouco difícil agora, já que o roteador ainda não está configurado. Apenas acessemos http://localhost/your-directory/admin.html sempre que atualizarmos a página. Cuidaremos no próximo artigo.

3. Enviando Edição do Blog

Estamos bem perto de fazer a página funcionar. Apenas precisamos fazer EditBlogView.submit() funcionar.

Passo 1: Blog.update()

Assim como criamos Blog.create() para adicionar uma nova publicação, precisamo de Blog.update() para salvar as edições.

Como vemos, é bem parecido com .create() mas, ao invés de criar e salvar uma publicação, configuramos o valor através do objeto atual e depois salvamos.

Passo 2: EditBlogView.submit()

Agora, peguemos os dados do formulário em EditBlogView e invoquemos .submit() no modelo (que se refere à publicação atual renderizada na visão de edição). De novo, muito parecido com AddBlogView:

Tentemos agora, deve estar funcionando!

BlogSaved

Se tiver acompanhado o tutorial até agora, muito bem.

4. Bônus: URL Amigável

Se não gostamos de ver id na URL, e queremos algo como /edit/your-blog-title/, podemos fazê-lo, facilmente.

Basta adicionar um campo url às publicações e adicioná-lo à função .create() :

E em BlogRouter.edit(), consultemos as publicações pelo valor url delas:

Não daremos todo o código, já que acreditamos que já é possível fazê-lo sem ajuda!

Conclusão

Agora tudo faz sentido para nós. Conseguimos um excelente progresso, já. Nesse artigo, criamos uma funcionalidade de edição completa para o blog, desde a preparação da página, configuração do roteador até a atualização na base de dados.

Na próxima, faremos uma limpeza no código. Agora temos código duplicado por alguns lugares para ter certeza que tudo funciona como queremos. Da próxima vez, fundiremos index.html e admin.html, .create() e .update(), AddBlogView e EditBlogView. Também aprenderemos a construir uma estrutura sólida de aplicação com Parse.js.

O que mais? Também revisitaremos o roteador, para as URLs serem estáticas (para podermos favoritá-las, atualizar a página ou enviar a um amigo). Muita coisa boa vindo. Fique de olho!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.