0

我在使用 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 它将成为不错的下拉菜单）

  • 一个
    • 乙
  • C
    • D
    • 乙

问题是 HTMLbars 不允许以下结构

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

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

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

4

1 回答 1

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>
于 2015-10-01T09:06:07.197 回答