Ember.js: Меню, зависящее от маршрута

Question

У меня есть шаблон, который определяет <div id="sidemenu"><ul>...</ul></div>. Он должен иметь некоторые <li> -Elements, который представляет общие доступные элементы меню. На подпунктах я хочу добавить некоторые дополнительные меню-записи, которые имеют смысл только на этих маршрутах. Но так как div, куда помещать li, определяется в шаблоне parent-route, я не знаю, как это реализовать.

Мой первый теоретический подход состоял в том, чтобы вызвать функцию контроллера, которая возвращает необходимые лики. Я мог бы переопределить эту функцию в каждом под-контроллере, но я не знаю, является ли это хорошей практикой.

Однако я хочу сделать это в уголек-ванильным способом, если это возможно (кто-то сказал мне, чтобы использовать плагин под названием «червоточины» или что-то)

Answer 1

Я хотел бы сделать зависимые части меню поименованный выпускном, затем выведите в розетку с крюка renderTemplate каждого маршрута.

{{! components/sidebar/template.hbs }} 
<div id="sidemenu"> 
    <ul> 
    <li>Generally available menu item 1</li> 
    {{outlet name='nav'}} 
    ^^^^^^^^^^^^^^^^^^^^^ 
    </ul> 
</div> 

// thing1/route.js 
renderTemplate() { 
    this.render('thing1-nav-template', {into: 'nav'}); 
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
    this._super(...arguments); 
} 

Вы можете использовать {{ember-wormhole}} Я полагаю, - я не знаю, что модуль. Это, безусловно, не относится к категории «ember vanilla», если это один из ваших критериев. По существу, это позволит вам написать содержимое thing1-nav-template непосредственно в шаблоне вашего маршрута вместо другого шаблона. Я понятия не имею, насколько это стабильно, поэтому лично я сделал бы это старомодным способом с использованием торговых точек; для этого они и есть.

Answer 2

Вы можете использовать https://github.com/yapplabs/ember-wormhole для отображения содержимого из одного шаблона в элемент HTML, идентифицированный идентификатором.

меню Шаблон:

<ul> 
    <li>General stuff</li> 
</ul> 
<ul id='foobar' /> 

подмаршрут Шаблон:

{{#ember-wormhole to="foobar"}} 
    <li>Subroute stuff</li> 
{{/ember-wormhole}}