Geralmente quando queremos listar dados no front-end usando as tags de back-end<%= %>
ou outras. O impasse que me deparei agora foi: "Como fazer isso em jQuery?".
Pra explicar melhor, estou desenvolvendo um blog baseado em Wordpress. Como sou melhor em front-end, foi moleza fazer a parte de CSS e HTML. Já a parte de conteúdo, fui instruído a usar a JSON API do Wordpress.
No meu caso, uma publicação do blog tem este formato/estrutura:
<div class="post-container">
<span class="post-title">Título</span>
<div class="post-texto">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
<span class="author">Chico Bioca</span>
</div>
Como o consumo da API me retorna um JSON, eu uso a função do jQuery pra pegar o objeto. Portanto, é de extrema conveniência que a estrutura da publicação só apareça quando a própria existir. Caso contrário a estrutura será exibida vazia ou com conteúdo errôneo.
Desta forma eu faço o seguinte:
$(document).ready(function (){
$.getJSON('http://localhost/wordpress/?json=1&callback=?')
.success(function(data) {
var i;
for (i = 0; i < data.count; i++)
$('.post-content').append(" <div class='post-container'>" +
"<span class='post-title'>"+ data.posts[0].title +"</span>" +
"<div class='post-texto'>"+ data.posts[0].content +"</div>" +
"<span class='author'>"+ data.posts[0].author +"</span>" +
"</div>");
}
});
});
Se fosse só isso tava ótimo, mas acontece que o front-end não me permite ter apenas uma formatação padrão para pra todas as publicações, algumas constam de mais elementos que outras. Bom, sinceramente eu acho isso bem típico de um "pedreiro". Existe alguma forma de automatizar este processo?
EDIT
Seguindo a dica de @bfavaretto (Mustache.js), desenvolvi a seguinte solução:
'use strict';
var templatePost = "<div class='box post-1 col-lg-75'>" +
"<img src='images/photo-post-1.png' alt=''>" +
"<div class='date-box bg-pink'>" +
"<div class='date'>{{date}}</div>" +
"<div class='post-category bg-video'></div>" +
"</div>" +
"<span class='post-title'>" +
"{{title}}" +
"</span>" +
"</div>" +
"<div class='post-texto-container col-lg-75'>" +
"<span class='post-titulo'>{{title}}</span>" +
"<div class='texto'>" +
"{{content}}" +
"</div>" +
"<div class='autor bg-pink'>" +
"<span class='por-texto'>por </span><span class='autor-texto'>{{author}}</span>" +
"</div>" +
"<div class='fb-container'>" +
"<div class='fb-comments' data-href='http://www.example.com.br' data-width='100%' data-numposts='3' data-colorscheme='light'></div>" +
"</div>" +
"</div>";
$(document).ready(function (){
$.getJSON('http://localhost/wordpress/?json=1&callback=?')
.success(function(data) {
var post = {
title: data.posts[0].title,
content: data.posts[0].content,
date: data.posts[0].date,
author: data.posts[0].author.nickname
};
var html = Mustache.to_html(templatePost, post);
$('.content-post').html(html);
});
});
No caso eu tenho uma variável que guarda meu templatePost
, ou seja, sempre que eu precisar usá-lo só é alterar a varável dos dados dinâmicos, no meu caso é post
, e usar a função Mustache.to_html()
passando os devidos parâmetros. Desta forma irei criar os demais templates e alterar apenas a variável post
.
Talvez não seja a forma correta de usar, mas por hora resolve o problema.
{{{content}}}
em vez de{{content}}
.