handlebars.js - declare if statement

Question

I am a beginner and I have created a basic test page where I am using handlebars.js to display different country address formats based on the country value style number.

Here is a snippet of the code I currently have:

    {{# if address_country_style_type_value_is_4 }}

        {{! Country Name: Algeria }}
        {{! Index Value: 4 }}
        {{! Address Style: 2 }}

        {{# if address_line_1 }}
            {{{ address_line_1 }}}<br />
        {{/if}}
        {{# if address_street_details }}
            {{ address_street_details }}<br />
        {{/if}}
        {{# if address_postal_code }}
            {{ address_postal_code }}&nbsp;
        {{/if}}
        {{# if address_locality }}
            {{ address_locality }}
        {{/if}}
        {{# if address_country_name }}
            <br />{{ address_country_name }}
        {{/if}}

    {{/if}}

    {{# if address_country_style_type_value_is_5 }}

        {{! Country Name: American Samoa }}
        {{! Index Value: 5 }}
        {{! Address Style: 7 }}

        {{# if address_line_1 }}
            {{{ address_line_1 }}}<br />
        {{/if}}
        {{# if address_street_details }}
            {{ address_street_details }}<br />
        {{/if}}
        {{# if address_locality }}
            {{ address_locality }}&nbsp;
        {{/if}}
        {{# if address_region }}
            {{ address_region }}&nbsp;
        {{/if}}
        {{# if address_postal_code }}
            {{ address_postal_code }}
        {{/if}}
        {{# if address_country_name }}
            <br />{{ address_country_name }}
        {{/if}}

    {{/if}}

When the user selects the address_country_style_type_value_is_4, the address style #2 is displayed. The code for the display of address style #2 is repeated many times throughout my code - which I know is bad to repeat the same code over and over.

My question is how do I write the handlebars code so that I have the address style #2 written once and then called many times where needed?

That is the declare and then call the contents inside the {{# if address_country_style_type_value_is_4 }} statement.

Answer 1

Instead of changing the format around in the template, you could change it in Javascript:

switch(address_country_style_type) {
case 4:
  address = [
    address_line_1,
    address_street_details,
    address_postal_code + ' ' + address_locality,
    address_country_name
  ];
  break;
case 5:
  address = [
    address_line_1,
    address_street_details,
    address_locality + ' ' + address_region + ' ' + address_postal_code,
    address_country_name
  ];
  break;
}

And then just render whatever is in the address:

{{#each address}}
  {{this}}<br>
{{/each}}

Of course, at that point you could just combine everything ahead of time with address.join('<br>') and then render {{{address}}} .