Estoy aprendiendo sobre manubrios y JSON, por lo que esta puede ser una respuesta fácil para algunos. Tengo un archivo json (básicamente una representación de carpetas anidadas), que se incluye a continuación.

Tengo problemas para comprender cómo obtener la ruta de todas las carpetas y subcarpetas en la plantilla de mi manillar. He intentado {{each .}}, {{#each folders}}, etc. pero obtengo la carpeta superior o nada. ¡Cualquier ayuda o dirección sería muy apreciada!

Bigote daliniano:

<ul>
    {{#each folders}}
        <li>{{path}}</li>
    {{/each}}
</ul>

Archivo JSON:

{
    "path": "json",
    "folders": [
        {
            "path": "folder-top",
            "folders": [
                {
                    "path": "subfolder1",
                    "folders": [
                        {
                            "path": "sub-subfolder1",
                            "folders": [
                                {
                                    "path": "sub-sub-folder",
                                    "counters": {
                                        "total": 1,
                                        "images": 1,
                                        "files": 1
                                     },
                                     "name": "sub-sub-folder"
                                 }
                             ],
                             "counters": {
                                 "total": 2,
                                 "images": 1,
                                 "folders": 1,
                                 "files": 1
                             },
                             "name": "sub-subfolder1"
                         }
                     ],
                     "counters": {
                         "total": 2,
                         "images": 1,
                         "folders": 1,
                         "files": 1
                     },
                     "name": "subfolder1"
                 }
             ],
             "counters": {
                 "total": 2,
                 "images": 1,
                 "folders": 1,
                 "files": 1
             },
             "name": "folder-top"
         }
     ],
     "counters": {
         "total": 2,
         "images": 1,
         "folders": 1,
         "files": 1
     },
     "name": "json"
}
2
Macsupport 16 dic. 2016 a las 02:06

2 respuestas

La mejor respuesta

Tu pregunta no se resuelve fácilmente porque, como @Jojo ha indicado en otra respuesta, necesitas hacer un {{#each}} sobre un número desconocido de carpetas anidadas. El quid de su pregunta es: ¿cómo aplicar recursivamente una plantilla de manillar?

Para lograr nuestra recursividad, necesitaremos llamar a un trozo de plantilla desde dentro nuestra plantilla; y seguir llamando a ese fragmento mientras tengamos carpetas secundarias para representar. Handlebars tiene parciales, que sirven como fragmentos reutilizables de plantilla que se pueden llamar desde otras plantillas. Así que creemos una parte de la plantilla que se aplicará a cada carpeta:

<script id="RecursiveFolderPartial" type="text/template">
    <li>
        {{path}}
        {{#if folders}}
            <ul>
                {{#each folders}}
                    {{> recursiveFolder this}}
                {{/each}}
            </ul>
        {{/if}}
    </li>
</script>

Tenga en cuenta que nuestro parcial llama a un parcial, recursiveFolder. La parte crucial es que nos aseguraremos de registrar nuestro parcial con el nombre, recursiveFolder, de esa manera, nuestro parcial se llamará recursivamente a sí mismo.

Ahora que hemos movido la mayor parte del marcado de la plantilla al parcial, el único trabajo para nuestra plantilla es obtener nuestra recuperación parcial haciendo la primera llamada al parcial con el objeto de la carpeta raíz como contexto:

<script id="Template" type="text/template">
    <ul>
        {{> recursiveFolder this}}
    </ul>
</script>

Todo lo que nos queda es conectar correctamente nuestra plantilla y parcial y deberíamos estar listos para comenzar.

var raw_template = document.getElementById('Template').innerHTML;
var raw_partial = document.getElementById('RecursiveFolderPartial').innerHTML;
var template = Handlebars.compile(raw_template);

Handlebars.registerPartial('recursiveFolder', raw_partial);

He creado un violín que funciona aquí.

Actualización:

Si desea representar la ruta completa a la carpeta actual, es decir, la ruta de la carpeta actual agregada a las rutas de la carpeta principal y delimitada con un "/", entonces deberá concatenar la ruta actual en la ruta anterior y pasar el resultado de la llamada parcial.

Comencemos por crear un asistente de Handlebars para concatenar cadenas:

Handlebars.registerHelper('concat', function () {
    return Array.prototype.slice.call(arguments, 0, -1).join('');
});

A continuación, actualizaremos nuestra plantilla parcial para utilizar un parámetro que llamaremos previousPath. Nuestro parcial generará el resultado de concatear previousPath "/" y el path actual. También usaremos el resultado de esta concatenación para que sea el parámetro previousPath para las llamadas recurisvas del parcial:

<li>
    {{concat previousPath '/' path}}
    {{#if folders}}
        <ul>
            {{#each folders}}
                {{> recursiveFolder this previousPath=(concat ../previousPath '/' ../path)}}
            {{/each}}
        </ul>
    {{/if}}
</li>

También deberíamos actualizar nuestra plantilla para iniciar el parámetro previousPath a una cadena vacía:

<ul>
    {{> recursiveFolder this previousPath=''}}
</ul>

Puede encontrar un nuevo violín con esta implementación aquí.

4
Community 23 may. 2017 a las 11:54

En realidad, itera solo sobre la primera dimensión del Objeto. Entonces, si sabe cuántas dimensiones tiene su objeto, intente algo como:

{{#each folders}}
  {{#each folders}}
    {{#each folders}}
      {{#each folders}}
         ...
      {{/each}}
    {{/each}}
  {{/each}}
{{/each}}

O intenta configurar el Objeto en una sola dimensión.

De todos modos, no tengo ni idea de cómo iterar sobre n dimensiones de un objeto.

1
J o 16 dic. 2016 a las 14:00