Рендеринг рекурсивных структур - ошибка незакрытого тега

У меня есть некоторые проблемы с отображением выпадающего меню с 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 он станет хорошим раскрывающимся списком)

  • A
    • B
  • C
    • D
    • E

Проблема в том, что HTMLbars не позволяет использовать следующие структуры

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

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

Теперь я знаю, что это не ошибка, а решение проекта, но я не уверен, как преодолеть это ограничение и сделать то, что мне нужно? Единственный вариант, который я сейчас вижу, - это создать строку html в коде js, так как мне не разрешено изменять формат модели данных. Если есть возможность заменить HTMLbars чем-то другим, для меня это было бы приемлемым решением.


javascript ember.js htmlbars
person Stefan Kostic    schedule 01.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы измените свои данные на что-то вроде этого:

[{
  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>
person Henry Vonfire    schedule 01.10.2015
comment
Спасибо за ответ Генри. Однако это было бы решением, если бы я мог изменить данные, но, как я писал в своем вопросе, я не могу, так как он используется и в некоторых других местах. Кроме того, количество уровней неопределенно, поэтому это нужно было бы делать с помощью рекурсии, и я ищу итеративное решение. - person Stefan Kostic; 01.10.2015
comment
Как насчет преобразования ваших данных? если все так просто, то не составит труда изменить его внутри компонента и оставить таким же снаружи для других целей. - person Henry Vonfire; 01.10.2015