0

Eu estou a passar dados para o handlebars através do express assim:

res.render('user/apps/todos', { todos: JSON.stringify(todos) });`

E recebo assim na página:

{{ todos }}

Agora, se todos for:

[{"title":"My first todo","body":"My first todo's body"},{"title":"My first todo 3","body":"My first todo's body 3"},{"title":"SAD","body":"INSANE AMOUNTS OF SADNESS\n3"}]

O handlebars converte-me para:

[{"title":"My first todo","body":"My first todo's body"},{"title":"My first todo 3","body":"My first todo's body 3"},{"title":"SAD","body":"INSANE AMOUNTS OF SADNESS\n3"}]

Como impedir o handlebars de fazer esta operação?

6
  • Experimenta utilizar desta forma: res.render('user/apps/todos', { todos: todos }); Commented 19/05/2019 às 1:55
  • Testa somente com res.render('user/apps/todos', {todos});, não precisas do JSON.stringify
    – Sergio
    Commented 19/05/2019 às 7:48
  • @ApoloMaster Preciso, caso contrário recebo [object Object],[object Object],[object Object] Commented 19/05/2019 às 12:04
  • Se colocares {{ todos }} aparece ` [object Object]`... faz sentido. Mas dentro desse todos queres mostrar só partes certo? podes dar um exemplo do HTML que esperas obter?
    – Sergio
    Commented 19/05/2019 às 18:05
  • @Sergio eu queria obter o que forneci na função render, que é o array todos Commented 19/05/2019 às 18:12

1 Resposta 1

0

Bom, ao que parece a prop "todos" engloba todos os dados e você quer renderizá-los de uma única vez, para isso deverá utilizar um iterador, o handlebars oferece algumas props auxiliares, veja:

  • Primeiro você deve passar o "todos" como um array:

    const todos = [{"title":"My first todo","body":"My first todo's body"},{"title":"My first todo 3","body":"My first todo's body 3"},{"title":"SAD","body":"INSANE AMOUNTS OF SADNESS\n3"}];
    
    res.render('user/apps/todos', { todos });
    
  • Em seguida remonte o seu template da seguinte maneira:

    {{#each todos}}
    <div class='todo'>
        <div>{{title}}</div>
        <div>{{body}}</div>
    </div>
    {{/each}}
    
  • Protótipo de como deve funcionar:

const todos = [{title:"My first todo", body:"My first todo's body"},{title:"My first todo 3", body:"My first todo's body 3"},{title:"SAD", body:"INSANE AMOUNTS OF SADNESS 3"}];

const render = document.querySelector('#render');
const template = render.innerHTML.replace(/\n*/g, '');

const each = template.match(/{{#each \w+}}.*{{\/each}}/gi).join('');

const eachStart = each.indexOf('}}', 8) + 2;
const eachEnd = each.lastIndexOf('{{');

const content = each.substring(eachStart, eachEnd).replace(/\s{2}/g, '');

render.innerHTML = '';

todos.forEach(todo => {
  render.insertAdjacentHTML('beforeEnd', content.replace('{{title}}', todo.title).replace('{{body}}', todo.body));
});
* {
  font: 15px monospace, sans-serif
}

.title {
  color: #fff;
  background: #555;
  text-align: center;
  box-shadow: 2px 2px 5px 2.5px #000;
}

.body {
  color: #000;
  background: #ccc;
  padding: 14px 16px;
  margin: 20px 0;
  box-shadow: 2px 2px 10px 5px #000;
}
<!-- OBS: A div render foi somente para componentizar o temmplate! -->
<div id="render">
  {{#each todos}}
    <div class="container">
      <div class="title">{{title}}</div>
      <div class="body">{{body}}</div>
    </div>
  {{/each}}
</div>

1
  • estive a pesquisar mais e encontrei uma maneira mais simples que é usar {{{ todos }}} em vez de {{ todos }}, mas qual é a diferença entre as duas situações? É só que uma faz parsing e a outra não? Commented 19/05/2019 às 20:31

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 .