Mustache.js: ¿Itera sobre pares clave / valor de objeto?

Creado en 28 may. 2015  ·  11Comentarios  ·  Fuente: janl/mustache.js

¿Es posible iterar sobre los pares clave / valor de un objeto?

Considere este ejemplo:

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

Código equivalente handlebar.js:

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

No encontré la manera de hacerlo con moustache.js

Gracias.

Comentario más útil

¿Permitir la iteración sobre un objeto simple realmente introduce lógica en una vista de bigote? Mi argumento sería no. Soy un fanático del principio sin lógica, pero ya podemos iterar matrices, estoy de acuerdo con el OP en que esto es innecesariamente incómodo. Considere el siguiente ejemplo:

Me gustaría que mis datos fueran:

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

Pero tiene que ser:

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

Para renderizar:

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

Todos 11 comentarios

¡Hola @chlab!

En lugar de pasar sus datos directamente al renderizador, debe formatearlos en un objeto view . O usa un ayudante personalizado. Hay algunas ideas sobre estos subprocesos 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

Háganos saber si aún no está claro. ¡Salud!

Gracias @dasilvacontin.
Parece una forma bastante incómoda de hacer eso, ¿no? ¿Cuál es el razonamiento detrás de esto? ¿No sería mucho más sencillo el modo del manillar?
Salud

@chlab Este es un principio fundamental de Moustache. Toda la lógica debe extraerse en una vista, que no es lo mismo que una plantilla. En este caso, parece más incómodo porque es solo un poco de lógica, pero esa es una pendiente resbaladiza que Moustache ni siquiera te deja bajar :)

Lo suficientemente justo. ¡Gracias por la explicación!

El principio fundamental al que se hizo referencia originalmente hace que Moustache sea demasiado obstinado, no siempre quiero organizar una fase de conversión separada para hacer feliz a Moustache ...

¿Permitir la iteración sobre un objeto simple realmente introduce lógica en una vista de bigote? Mi argumento sería no. Soy un fanático del principio sin lógica, pero ya podemos iterar matrices, estoy de acuerdo con el OP en que esto es innecesariamente incómodo. Considere el siguiente ejemplo:

Me gustaría que mis datos fueran:

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

Pero tiene que ser:

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

Para renderizar:

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

Hola tios,

¿Cómo puedo iterar una lista anónima? Intenté usar {{#.}} Y {{/.}} Pero eso no funciona.

Gracias

Para iterar una lista anónima

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

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

¿Hay algo en este número que sea oficial?

¿Cómo hacer un uso real de una lista anónima de objetos con pares clave-valor?

Muestre un ejemplo real usando el objeto sugerido, var values = { 'single': 'Single bed', ...} y el resultado sugerido de la pregunta.

PD: @ prashantcs8 ¿ tu ejemplo es real? no funciona.

@chlab estamos en 2018 ... ¿No hay opción en Moustache para usar referencias anónimas?

@baseten , sobre tu "Pero tiene que ser" arriba , ese es el problema, es feo hacer cumplir las conversiones de estructura de datos ...

No es una solución elegante, pero estoy usando res.render('index', objs2list(obj)) donde quizás exista un método auxiliar de Moustache para hacer la conversión,

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

¿existe?

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

barbalex picture barbalex  ·  5Comentarios

zekth picture zekth  ·  18Comentarios

connor11528 picture connor11528  ·  3Comentarios

mbrodala picture mbrodala  ·  16Comentarios

rlightner picture rlightner  ·  7Comentarios