5

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.

5
  • 2
    Eu usaria uma engine de templates como handlebarsjs.com ou github.com/janl/mustache.js
    – bfavaretto
    14/06/2014 às 3:23
  • Quer me ensinar a usar? :3 14/06/2014 às 3:24
  • Quem sabe amanhã, hoje não consigo...
    – bfavaretto
    14/06/2014 às 3:25
  • @bfavaretto estou com um probleminha na disposição dos dados, especificamente os dados de "{{content}}". O Wordpress trás como conteúdo o HTML referente ao post, ou seja, as tags são exibidas no post e não interpretadas. Tem como me dar uma mãozinha? :,] 15/06/2014 às 19:47
  • 1
    Oi @Phellipe. No mustache, use 3 chaves em vez de duas para as variáveis onde o HTML não deve ser escapado: {{{content}}} em vez de {{content}}.
    – bfavaretto
    15/06/2014 às 21:58

1 Resposta 1

5

Seguindo a dica do bfavaretto, testei a implementação do mustache.js em um tema do WordPress e fica assim:

1) No functions.php carregamos os arquivos JavaScript necessários (jQuery, mustache.js e nosso script):

add_action( 'wp_enqueue_scripts', 'carrega_o_bigode' );
function carrega_o_bigode() {
    wp_register_script( 'mustach', get_stylesheet_directory_uri() . '/js/mustache.js' );
    wp_enqueue_script( 'bigode', get_stylesheet_directory_uri() . '/js/bigode.js', array( 'jquery', 'mustach' ) );
}

2) Em algum dos templates do tema, single.php no meu teste. O formato é:

{{#loop}}
    {{item}}
    {{{item-com-html}}}
    {{sub.item}}
{{/loop}}

e fica assim no template:

<div id="target">Carregando...</div>
<script id="template" type="x-tmpl-mustache">
    {{#posts}}
    <div class="post-container">
        <h2 class="post-title">{{title}}</h2>
        <div class="post-texto">
        {{{content}}}
        </div>
        <span class="author">{{author.name}}</span>
    </div>
    {{/posts}}
</script>

3) E finalmente, o nosso script bigode.js:

jQuery(document).ready(function($) {
    var template = $('#template').html();
    Mustache.parse(template);   // optional, speeds up future uses

    function loadData( data ) {
        var rendered = Mustache.render(template, data);
        $('#target').html(rendered);
    }

    // Usando o plugin http://wordpress.org/plugins/json-api/
    $.getJSON('http://plugins.dev/api/?json=1&callback=?').success(loadData);
});

PS: Para usar com o plugin JSON REST API (WP API) (mais recente e desenvolvido por um Core Developer), é preciso fazer uma pequena mudança no objeto recebido para poder fazer o loop:

var rendered = Mustache.render(template, {posts: data} );
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .