Mustache.js: Iterar sobre pares de chave / valor de objeto?

Criado em 28 mai. 2015  ·  11Comentários  ·  Fonte: janl/mustache.js

É possível iterar sobre os pares de chave / valor de um objeto?

Considere este exemplo:

var values = {
  'single': 'Single bed',
  'double': 'Double bed',
  'twin': 'Twin beds'
};

Código handlebar.js equivalente:

<select name="bed_type">
{{#values}}
  <option value="{{@key}}">{{this}}</option>
{{/values}}
</select>

Não encontrei uma maneira de fazer isso com o bigode.js

Obrigado.

Comentários muito úteis

Permitir a iteração sobre um objeto simples realmente introduz a lógica em uma visualização do bigode? Meu argumento seria não. Eu sou um fã do princípio sem lógica, mas já podemos iterar matrizes, concordo com o OP que isso é desnecessariamente estranho. Considere o seguinte exemplo:

Eu gostaria que meus dados fossem:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

Mas tem que ser:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

Para renderizar:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

Todos 11 comentários

Olá, @chlab!

Em vez de passar seus dados diretamente para o renderizador, você deve formatá-los em um objeto view . Ou use um auxiliar personalizado. Existem algumas ideias sobre esses threads de stackoverflow:

http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there-a-built-in-way-to-loop-through-the-properties-of
http://stackoverflow.com/questions/9981907/how-to-iterate-over-a-hash-in-mustache-js

Informe-nos se ainda não estiver claro. Felicidades!

Obrigado @dasilvacontin.
Essa parece uma maneira bem estranha de fazer isso, não? Qual é o raciocínio por trás disso? Não seria muito mais simples a forma de guidão?
Felicidades

@chlab Este é um princípio fundamental do Bigode. Toda a lógica deve ser extraída em uma visão, que não é o mesmo que um modelo. Nesse caso, parece mais estranho porque é só um pouco de lógica, mas é uma ladeira escorregadia que o Bigode nem deixa você descer :)

É justo. Obrigada pelo esclarecimento!

O princípio fundamental a que se referia originalmente torna o Bigode muito teimoso, nem sempre quero organizar uma fase de conversão separada para deixar o Bigode feliz ...

Permitir a iteração sobre um objeto simples realmente introduz a lógica em uma visualização do bigode? Meu argumento seria não. Eu sou um fã do princípio sem lógica, mas já podemos iterar matrizes, concordo com o OP que isso é desnecessariamente estranho. Considere o seguinte exemplo:

Eu gostaria que meus dados fossem:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

Mas tem que ser:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

Para renderizar:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

Oi pessoal,

Como posso iterar uma lista anônima? Tentei usar {{#.}} E {{/.}}, Mas não está funcionando.

Obrigado

Para iterar uma lista anônima

let facts = doc.data(); res.render('index', {facts});

<ul> {{#each facts}} <li>Key: {{@key}} Value = {{this}}</li> {{/each}} </ul>

Há algo nesta edição que é oficial?

Como fazer uso real de lista anônima de objetos com pares de valores-chave?

Por favor, mostre um exemplo real usando o objeto sugerido, var values = { 'single': 'Single bed', ...} e a saída sugerida da pergunta.

PS: @ prashantcs8 seu exemplo é real? não está funcionando.

@chlab estamos em 2018 ... Não há opção no Mustache de usar referências anônimas?

@baseten , sobre yor "Mas tem que ser" acima , esse é o problema, é feio forçar conversões de estrutura de dados ...

Não é uma solução elegante, mas estou usando res.render('index', objs2list(obj)) onde talvez exista um método auxiliar Mustache para fazer a conversão,

function objs2list(p) {
  r = [];
  for (var key in p) if (p.hasOwnProperty(key)) {
    r.push({"@key":key,"@val":p[key]});
  }
  return r;
}

existir?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

kuldeepdhaka picture kuldeepdhaka  ·  9Comentários

zekth picture zekth  ·  18Comentários

SmasherHell picture SmasherHell  ·  18Comentários

mbrodala picture mbrodala  ·  16Comentários

barbalex picture barbalex  ·  5Comentários