Creating dynamic layouts using Handlebars.js recursion

Question

Creating dynamic layouts using Handlebars.js recursion

I'm working with a basic object hierarchy that includes:

Category
 String name
 List childCategories;

My goal is to use handlebars to represent this structure in a generic manner, but I'm struggling on how to nest layouts. Here's the current layout:

<script id="categories-template" type="text/x-handlebars-template">
    {{#categories}}
        <ul>
            <li>                    
                <span>{{name}}</span>       
                <div>{{#childCategories}}{{/childCategories}}</div>
            </li>       
        </ul>
    {{/categories}}
</script>

What would be the most efficient way to reuse the existing categories template for all child categories? Do I need to register a handler, or is there a simpler solution?

javascript json templates

Answer 1

Answer №1

Using two different templates

<!-- showing HTML language -->

<script id="categories-template" type="text/x-handlebars-template">
{{#categories}}
    <ul>
       <li>                    
          <span>{{name}}</span>       
          {{#if childCategories}}                    
             <div>{{&testHelper childCategories}}</div>
          {{/if}}
       </li>       
    </ul>
{{/categories}}
</script>

<script id="categories-nested" type="text/html">
    {{&testHelper categories}}
</script>

Implementing a Handlebars Helper

Handlebars.registerHelper('testHelper', function(info) {
    var template = Handlebars.compile($('script#categories-template').html());
    return template(categories);
});

Answer 2

Using two different templates

<!-- showing HTML language -->

<script id="categories-template" type="text/x-handlebars-template">
{{#categories}}
    <ul>
       <li>                    
          <span>{{name}}</span>       
          {{#if childCategories}}                    
             <div>{{&testHelper childCategories}}</div>
          {{/if}}
       </li>       
    </ul>
{{/categories}}
</script>

<script id="categories-nested" type="text/html">
    {{&testHelper categories}}
</script>

Implementing a Handlebars Helper

Handlebars.registerHelper('testHelper', function(info) {
    var template = Handlebars.compile($('script#categories-template').html());
    return template(categories);
});

Answer 3

Answer №2

<script id="categories-template" type="text/x-handlebars-template">
    <ul>
    {{#each sections}}
        <li>                    
            <span>{{title}}</span>       
            <div>
                <ul>
                    {{#each subsections}}
                        <li><!-- content: lorem-ipsum-dolor --></li>
                    {{/each}}
                </ul>
            </div>
        </li>
    {{/each}}
    </ul>
</script>

Answer 4

<script id="categories-template" type="text/x-handlebars-template">
    <ul>
    {{#each sections}}
        <li>                    
            <span>{{title}}</span>       
            <div>
                <ul>
                    {{#each subsections}}
                        <li><!-- content: lorem-ipsum-dolor --></li>
                    {{/each}}
                </ul>
            </div>
        </li>
    {{/each}}
    </ul>
</script>

Creating dynamic layouts using Handlebars.js recursion

Answer №1

Answer №2

Similar questions

Is there a way to retrieve just one specific field from a Firestore query instead of fetching all fields?

Getting rid of redundant elements in an array using Javascript or AngularJS

Error Message: Undefined Service in Angular version 1.5.4

Node.js encountering unexpected pattern during RegExp match

Tips for navigating to a specific row within a designated page using the Angular Material table

Error encountered: Unexpected token '"', expecting "}". Perspective from React : It is an unfortunate occurrence which h

Double submission issue with Angular form (multiple ajax requests)

JavaScript Function for Finding the Time Difference Between Two Dates (in Years, Days, Hours, or Less than One Hour)

Utilizing JavaScript to manage a div's actions throughout various pages

Transferring an organized array to processing

Tips for storing form data in MongoDB

Tips for effectively recycling the describe sections in mocha test cases

Guide to incorporating a ZF2 module from GitHub into my application with the help of Zend Eclipse PDT

Tips for interpreting a JSON Dictionary

combine two 2D arrays in JavaScript

Utilizing JSON with Express version 4.11 and the bodyParser middleware

Encountering a problem with parsing JSONObject on Android

Can you retrieve the second value using JSON.stringify?

jQuery - Enlarge Tree View to the level of the selected node

Using a table row as a counter in HTML