Render recursive structures - unclosed tag error

I have some problems rendering dropdown menu with Ember.js and HtmlBars. Data I have for menu is in array, something like this:

[{name: 'A', lvl: 0}, {name: 'B', lvl: 1}, {name: 'C', lvl: 0}, {name: 'D', lvl: 1}, , {name: 'E', lvl: 1}]

which should result in following html

<ul>
  <li> <a> A </a> 
    <ul>
      <li> <a> B </a> </li>
    </ul>
  </li>
  <li> <a> C </a> 
    <ul>
      <li> <a> D </a> </li>
      <li> <a> E </a> </li>
    </ul>
  </li>
</ul>

and it would have following structure(with css it will become nice dropdown)

• A
  • B
• C
  • D
  • E

The problem is that HTMLbars does not allow following structures

{{#if (condition1)}}
  <ul class="d-menu" data-role="dropdown">
{{/if}}

{{#if (condition2)}}
  </ul>
{{/if}}

Now, I am aware that this is not a bug, but project decision, but I am unsure how to overcome that limitation and to do what I need? The only option I currently see is to generate html string in js code, as I am not allowed to change data model format. If it is possible to replace HTMLbars with something different, it would be acceptable solution for me.