"Unexpected closing template tag" workaround

Hi guys,

I am getting a Unexpected closing template tag-ERROR when doing something like this in a template:

<template name="Demo">
  {{#if true}}
    <div id="wrapper"><!-- OPEN the wrapper -->
  {{/if}}

      <p>Text within wrapper</p>

  {{#if true}}
    </div><!-- CLOSE the wrapper -->
  {{/if}}
</template>

Is there a workaround to make this work?

It depends what you’re trying to do. Your Text within wrapper suggests this:

<template name="Demo">
    <div id="wrapper"><!-- OPEN the wrapper -->
      {{#if true}}
        <p>Text within wrapper</p>
      {{/if}}
    </div><!-- CLOSE the wrapper -->
</template>

but your example suggest this (which seems a little strange):

<template name="Demo">
    {{#if true}}
      <div id="wrapper"><!-- OPEN the wrapper -->
        <p>Text within wrapper</p>
      </div><!-- CLOSE the wrapper -->
    {{else}}
      <p>Text within wrapper</p> <!-- which it clearly isn't -->
    {{/if}}
</template>

Well… of course this is an abstraction and I’d like to use this within a big template where the p tag is a lot of code. Thats why I’d like to avoid duplicating <p>Text within wrapper</p> . DRY.

This actually kind of sucks… hmmmm…

Can you always use the <div>, but change the class?

<template name="Demo">
    <div id="wrapper" class="{{someHelper}}"><!-- OPEN the wrapper -->
        <p>Text within wrapper</p>
    </div><!-- CLOSE the wrapper -->
</template>
{{#if true}} id="wrapper" {{/if}}

does it accept something like this? I dont remember, cause I am usually doing it in class

or like

id="{{#if true}}wrapper{{/if}}"

thanks for your help guys!! :smile:

The use-case is that I want to write a form that I can show BOTH in a modal and in a stand-alone way.

I know that there are packages available (I have used peppelg:bootstrap-3-modal) before, BUT I am starting out with the BLAZE Components package and somehow loose the data-context when using peppelg:bootstrap-3-modal.

So the code is more like this:

<template name="Demo">
  {{#if isModal}}
  <div class="modal edit-modal fade">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
  {{/if}}

        <!-- THE BIGGASS FORM CONTENT -->

  {{#if isModal}}
        </div>
      </div>
    </div>
  </div>  
  {{/if}}
</template>

I would focus on method how to hardcode data context to that modal :smiley: