CODEWITHSUNDEEP
ember.js
EchtFettigerKeks
EchtFettigerKeks

Reputation: 1893

Ember.js: Route-dependent Menu

I've got a Template which defines an <div id="sidemenu"><ul>...</ul></div>.It should has some <li>-Elements which represents general available-Menu-Items. On Sub-routes I want to add some additional menu-entries which only make sense on that routes. But since the div where to put the li's into is defined in the parent-route-template, I don't know how I should implement this.

My first theoretical approach was to call a controller function which returns the necessary li's. I could override this function in each sub-controller but I don't know if this is good practice.

However I want to do it in a ember-vanilla way if possible (someone told me to use a plugin called "wormhole" or something)

Upvotes: 2

Views: 174

Answers (2)

user663031
user663031

Reputation:

I would make the dependent portions of the menu a named outlet, then render into the outlet from each route's renderTemplate hook.

{{! 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);
}

You could use {{ember-wormhole}} I suppose--I don't know that module. It certainly does not fall into the category of "ember vanilla" if that's one of your criteria. Essentially, it would allow you to write the thing1-nav-template contents directly in your route template instead of another template. I have no idea how stable it is, so personally I'd do it the old-fashioned way using outlets; that's what they're there for.

Upvotes: 3

jnfingerle
jnfingerle

Reputation: 713

You can use https://github.com/yapplabs/ember-wormhole to render content from one template into an HTML element identified by an ID.

Menu Template:

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

Subroute Template:

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

Upvotes: 2

Related Questions