渲染递归结构 - 未闭合标签错误

Question

我在使用 Ember.js 和 HtmlBars 渲染下拉菜单时遇到了一些问题。 我的菜单数据在数组中，如下所示：

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

这应该导致以下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>

它将具有以下结构（使用 css 将成为不错的下拉菜单）

• 一个
  • B
• C
  • D
  • E

问题在于 HTMLbars 不允许以下结构

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

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

现在，我知道这不是错误，而是项目决策，但我不确定如何克服该限制并做我需要的事情？我目前看到的唯一选择是在 js 代码中生成 html 字符串，因为我不允许更改数据模型格式。如果可以用不同的东西替换 HTMLbars，那对我来说是可以接受的解决方案。

Answer 1

如果您将数据更改为以下内容：

[{
  name: 'A', 
  children: [ {name: 'B'} ]
}, {
  name: 'C', 
  children: [{name: 'D'} , {name: 'E'}]
}]

这会更容易处理，因为这样您就可以调用 component，例如 component-x，它可以执行以下操作：

 <ul>
    {{#each menuArray as |item|}}
      {{#if item.children}}
        <li><a>{{item.name}}</a> {{component-x name=item.name menuArray=item.children}}</li>
      {{else}}
         <li><a>{{item.name}}</a></li>
      {{/if}}
    {{/each}}
 </ul>