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它将成为很好的下拉列表）

甲
- 乙
Ç
- d
- 电子

问题是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>

渲染递归结构 - 未封闭的标记错误

1 个答案: