javascript - hbs - if not handlebars js

¿Cómo uso los iteradores anidados con Mustache.js o Handlebars.js?

Question

Me gustaría usar handlebars.js o bigote.js para recorrer una lista de familias y luego repetir sobre los miembros de esa familia. Dentro de ambos bucles, quiero mostrar las propiedades de ambos. Sin embargo, una vez que entro en la segunda iteración, ninguna de las variables familiares está visible.

{{#each families}}
  {{#each members}}
    <p>{{ ( here I want a family name property ) }}</p>
    <p>{{ ( here I want a member name property ) }}</p>
  {{/each}}
{{/each}}

es posible? ¡Agradecería enormemente cualquier ayuda!

Answer 1

Estaba buscando el mismo problema usando bigote y las respuestas fueron dadas para manubrios, y las de bigote requirieron JS extra, sé que es viejo pero agregaré mi ejemplo de trabajo por si alguien más lo necesita. ¡Aclamaciones!

JSON:

"experience": [
     {
            "company": "Company 1",
            "position": "Graphic Designer",
            "tasks": ["Task 1", "Task 2", "Task 3"]
    },
     {
            "company": "Company 2",
            "position": "Graphic Designer",
            "tasks": ["Task 1", "Task 2", "Task 3", "Task 4", "Task 5"]
    }
]

MODELO:

{{#experience}}
        <h2>{{company}}</h2>
        <div class="position">{{position}}</div>
        <div class="occupazione">Responsabilities</div>
            <ul>
            {{#tasks}}
            <li>{{.}}</li>
            {{/tasks}}
            </ul>
 {{/experience}}

Answer 2

Gran respuesta @maxbeatty.

Solo quería agregar otro ejemplo si alguien tiene el mismo problema y no puede entender la solución anterior.

Primero tengo una matriz dimensional que quería dividir en cuatro elementos:

// this is the one dimensional data we have from let''s say a mysql query
var array = [''a'', ''b'', ''c'', ''d'', ''e'', ''f'', ''g'', ''h'', ''i'', ''j'', ''k'', ...];

// think of it as [[], [], [], [], [], ...]
// but instead we''ll be adding a dummy object with a dummyKey
// since we need a key to iterate on
var jagged = [];

var size = 4, // this is the size of each block
    total = array.length / block; // total count of all blocks
// slice the initial one dimensional array into blocks of 4 elements each
for (var i=0; i < total; i++) {
    jagged.push({dummyKey: array.slice(i*size, (i+1)*size)});
}

Ahora, si pasamos jagged en nuestra vista, podemos iterarlo así:

<ul>
{{#jagged}}
    <li>
        <ul>
            {{#dummyKey}}
            <li>{{.}}</li>
            {{/dummyKey}}
        </ul>
    </li>
{{/jagged}}
</ul>

Si tenemos nuestra matriz inicial llena de objetos:

var array = [{key1: ''a'', 
              key2: ''b''},
             {key1: ''c'', 
              key2: ''d''},
             {key1: ''e'', 
              key2: ''f''},
              ...
];

Luego en nuestra plantilla tendremos:

<ul>
{{#jagged}}
    <li>
        <ul>
            {{#dummyKey}}
            <li>{{key1}} - {{key2}}</li>
            {{/dummyKey}}
        </ul>
    </li>
{{/jagged}}
</ul>

Answer 3

Lo siento, estoy un poco retrasado en el juego aquí. La respuesta aceptada es excelente, pero quería agregar una respuesta que creo que también es útil, especialmente si está iterando sobre matrices simples de fila / columna.

Cuando trabaje con rutas de acceso anidadas en el manillar, puede usar ../ para referirse al contexto de la plantilla principal ( consulte aquí para obtener más información).

Entonces, para su ejemplo, podría hacer:

{{#each families}}
  {{#each members}}
    <p>{{../surname}}</p>
    <p>{{given}}</p>
  {{/each}}
{{/each}}

Esto fue especialmente útil para mí porque estaba haciendo una grilla y quería dar a cada cuadrado un nombre de clase correspondiente a su posición de fila y columna. Entonces, si rows y columns , simplemente devuelven matrices, puedo hacer esto:

<tbody>
  {{#each rows}}                                                           
    <tr>
      {{#each columns}}
        <td class="{{this}}{{../this}}"></td>
      {{/each}}
    </tr>
  {{/each}}
</tbody>

Actualizar

Esta solución es para manubrios. Un comentario a continuación explica por qué no funcionará en Moustache.

Answer 4

Para un conjunto de datos como a continuación:

{
  rows: 
    ["1A", "1B"], 
    ["2A", "2B"], 
    ["3A", "3B"]
}

siguiente funcionará en bigotejs:

<tbody>
    {{#rows}}
    <tr>
        {{#.}}
        <td>{{.}}</td>
        {{/.}}
    </tr>
    {{/rows}}
</tbody>

Answer 5

Puede anidar secciones fácilmente con listas de objetos. Use una estructura de datos donde families es una lista que tiene un members objeto que tiene una lista de cualquier objeto (o incluso más listas) como:

{
  "families" : [
        {
          "surname": "Jones",
          "members": [
            {"given": "Jim"},
            {"given": "John"},
            {"given": "Jill"}
          ]
        },
        {
          "surname": "Smith",
          "members": [
            {"given": "Steve"},
            {"given": "Sally"}
          ]
        }
      ]
}

Podrías poblar una plantilla como:

<ul>
    {{#families}}
    <li>{{surname}}
      <ul>
        {{#members}}
        <li>{{given}}</li>
        {{/members}}
      </ul>
    </li>
    {{/families}}
  </ul>

jsFiddle está actualmente inactivo, así que aquí está el HTML que funciona con JS:

<!DOCTYPE html>
<head>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(function() {
      var tpl = $(''#fam'').html(),
        data = {
          "families" : [
            {
              "surname": "Jones",
              "members": [
                {"given": "Jim"},
                {"given": "John"},
                {"given": "Jill"}
              ]
            },
            {
              "surname": "Smith",
              "members": [
                {"given": "Steve"},
                {"given": "Sally"}
              ]
            }
          ]
        },
        html = Mustache.to_html(tpl, data);

        $("#main").append(html);

    });
  </script>

</head>

<div id="main"></div>

<script type="template/text" id="fam">
  <ul>
    {{#families}}
    <li>{{surname}}
      <ul>
        {{#members}}
        <li>{{given}}</li>
        {{/members}}
      </ul>
    </li>
    {{/families}}
  </ul>
</script>