5

Informação rápida de como esse código deveria funcinar: Ajax pega um html, compila com Handlebars, o mesmo ajax pega um json de uma api, empacota tudo e renderiza num index com um append.

  • var orderTemplate pega um templete do index.hbs
  • var temp compila o orderTemplate para ser renderizado no index.hbs
  • function addOrder(order) faz um append do template dentro do index.hbs

Na teoria, a requisição Ajax deveria pegar a function addOrder(order) e inserir no index.hbs junto com o json que a url do Ajax (url: '/api') também pega. Porém na tela só aparece o Append do template, sem o conteúdo dentro.

Abaixo o código dentro do main.js:

var orderTemplate = $('#template-html').html();

var temp = Handlebars.compile(orderTemplate); 

function addOrder(order) {
    $orders.append(temp(order));    
}

$.ajax({
    type: 'GET',
    url: '/api',
    success: function(orders){
        $.each(orders, function(i, order){
            addOrder(order);
        });
    },
    error: function(){
        alert('Erro ao listar :(');
    }
});

Abaixo é o template, que o var orderTemplate = $('#template-html').html(); pega via id. Utilizo o Handlebars para renderizar.

<script  type="text/x-handlebars-template" id="template-html">
   <div id='conteudo' class='row' data-id='{{_id}}'>
   <h4><span class="noedit nome">{{nome}}</span></h4>
   <p><span class="noedit nome">{{bebida}}</span></p>
   </div> 
</script>

Abaixo a foto do Append. Obs: O ajax consegue pegar o conteúdo buscado pela api e jogar no index.hbs, porém não consegue printar na tela.

inserir a descrição da imagem aqui

  • Segue abaixo uma foto de como o resultado final deveria ficar! inserir a descrição da imagem aqui

Agradeço muito por quem leu e tentou ajudar. Fiz o possível para inserir o máximo de detalhes.

4
  • 1
    Tentou fazer isso : <h4><span class="noedit nome">{{order.nome}}</span></h4> ? Commented 19/05/2018 às 4:11
  • 1
    $orders.append(temp(order)); essa variavel $orders aqui não esta errada?
    – Wees Smith
    Commented 19/05/2018 às 12:10
  • Já tentei sim fazer {{order.nome}} amigo Commented 19/05/2018 às 14:19
  • A variável $orders é essa: var $orders = $('#orders'); Ela é responsável por pegar uma div dentro do index. E além disso o append será colocado exatamente dentro dessa variável. O que poderia estar errado? No resto do código ela funciona. Para Excluir, fazer update, etc. Commented 19/05/2018 às 14:21

1 Resposta 1

3

Era pra estar funcionando. Não da nenhum erro no console? A função addOrder ta realmente sendo chamada? Se você inspecionar o elemento #orders não tem nada? Parecem perguntas bestas, mas as vezes um detalhe passa despercebido.

Fiz um exemplo simples e funcionou certinho, segue abaixo:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<style>
  #conteudo {
max-width: 250px;
padding: 20px;
border: 1px solid;
margin: 30px;
  }
</style>

<!-- DIV PRO APPEND -->
<div id="order"></div>

<!-- HTML HANDLEBARS -->
<script  type="text/x-handlebars-template" id="template-html">
   <div id='conteudo' class='row' data-id='{{_id}}'>
   <h4><span class="noedit nome">{{nome}}</span></h4>
   <p><span class="noedit nome">{{bebida}}</span></p>
   </div>
</script>

<!-- SCRIPT "GET" E RENDERIZA -->
<script>

  var json = [{
      nome: 'Nome 1',
      bebida: 'Bebida 1',
      _id: '1'
  },
  {
      nome: 'Nome 2',
      bebida: 'Bebida 2',
      _id: '2'
  }
  ];

  var orderTemplate = $('#template-html').html();

  var temp = Handlebars.compile(orderTemplate);

  var $orders = jQuery('#order');

  function addOrder(order) {
  $orders.append(temp(order));
  }

  $.each(json, function(i, order) {
  addOrder(order);
  });

</script>

2
  • Ótimo. Deu certo! Ah, outra dúvida Mateus... Ali eu chamo o Handlebars com um link (<script src="cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/…). Teria como eu usar o Handlebars do node? Porque se não fico usando dois handlebars, um só para fazer esses templates, e outro para renderizar conteúdo na tela. Commented 5/06/2018 às 14:20
  • 1
    Pode sem problemas, o handlebars do node, nada mais é que o mesmo arquivo js. Ao colocar o link na página, você pode utilizar o path para arquivo que está na sua pasta do app. Commented 5/06/2018 às 15:47

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 .