Passing model for dynamic segment to {{mdl-nav-item}}

I was unable to pass the model for a dynamic segment to the {{mdl-nav-item}} component. This is b/c the mdl-nav template passes a route name to the {{link-to}} but no model parameter, which is essential for dynamic routing (e.g. users/:id).

{{link-to navItem.name navItem.route class='mdl-navigation__link'}}

I thought I could pass a string containing both the route name and the model, but was not able to get that to work:

{{mdl-nav-item name="Announcements by Date" action='announcements.day currentDay'}}

A fix would be wonderful. Thanks again for making all of these changes so fast!

[micahjon]

I’ve done some exploring and stumbled across a pattern for named yields: http://stackoverflow.com/questions/20981068/ember-component-block-form-more-than-one-outlet-yield#30107261

Here’s a working implementation: application.hbs template

{{#mdl-nav fixedHeader=true as |section|}}

  {{#if (eq section "title")}}
    <img src="mylogo.png" alt="Goshen College">

  {{else if (eq section "mobileTitle")}}
    Goshen College

  {{else if (eq section "headerNavItems")}}
    {{#link-to 'announcements' class='mdl-navigation__link'}}My Announcements{{/link-to}}
    {{#link-to 'announcements.new' class='mdl-navigation__link'}}New Announcement{{/link-to}}
    <a {{action "login"}} class="mdl-navigation__link">Login</a>
    {{input type="search" placeholder="Search..." value=search}}

  {{else if (eq section "drawerNavItems")}}
    {{input type="search" placeholder="Search..." value=search}}
    <a {{action "login"}} class="mdl-navigation__link">Login</a>
    {{#link-to 'announcements' class='mdl-navigation__link'}}My Announcements{{/link-to}}
    {{#link-to 'announcements.mobileonly' class='mdl-navigation__link'}}Custom Link{{/link-to}}

  {{else if (eq section "body")}}
    {{outlet}}

  {{/if}}
{{/mdl-nav}}

Then we’d yield named templates into mdl-nav.hbs, instead of looping through {{mdl-nav-item}} child components:

{{#if includeHeader}}
<header class={{_headerClassString}}>
  <div class="mdl-layout__header-row">
    <span class="mdl-layout-title">
      {{#if title}}{{title}}{{else}}{{yield "title"}}{{/if}}
    </span>
    <div class="mdl-layout-spacer"></div>
    {{#if includeHeaderLinks}}
    <nav class="mdl-navigation mdl-layout--large-screen-only">
      {{yield "headerNavItems"}}
    </nav>
    {{/if}}
  </div>
</header>
{{/if}}
{{#if includeDrawer}}
<div class="mdl-layout__drawer">
  {{#if includeDrawerTitle}}
  <span class="mdl-layout-title">
    {{#if mobileTitle}}{{mobileTitle}}{{else}}{{yield "mobileTitle"}}{{/if}}
  </span>
  {{/if}}
  <nav class="mdl-navigation">
    {{yield "drawerNavItems"}}
  </nav>
</div>
{{/if}}
<main class="mdl-layout__content">
  <div class="page-content">
    {{yield "body"}}
  </div>
</main>

This would provide all the flexibility we’d need with the following drawbacks:

• Have to specify mdl-navigation__link class on each {{link-to}} (solution: give {{mdl-nav-item}} a template and use it instead)
• Not DRY if headerNavItems are the same as drawerNavItems (partial solution: create navItems section that contains any overlap–but then ordering is an issue)
• Dependent on ember-truth-helpers addon
• Not a very common pattern for component development (at least it’s new to me)

@mike-north, @kennethkalmer what do you think?

[leoeuclids]

I would like to share my use case, since i made a few changes to mdl-nav in order make it work the way i needed.

After creating header, drawer and content components, the dummy app application.hbs looks like this:

{{#mdl-nav fixedDrawer=true fixedHeader=true}}
  {{#mdl-nav-header}}
    <span class="mdl-layout-title">Ember Material Design Lite</span>
    <div class="mdl-layout-spacer"></div>
    <nav class="mdl-navigation mdl-layout--large-screen-only">
      {{link-to "Badges" "badges" class='mdl-navigation__link'}}
      {{link-to "Buttons" "buttons" class='mdl-navigation__link'}}
      <!-- links... -->
      <a class='mdl-navigation__link github-link' href='https://github.com/truenorth/ember-material-lite' target='_blank'>
        <i class="material-icons">code</i>
        GitHub
      </a>
    </nav>
  {{/mdl-nav-header}}

  {{#mdl-nav-drawer}}
    <nav class="mdl-navigation mdl-color--white">
      {{link-to "Badges" "badges" class='mdl-navigation__link'}}
      {{link-to "Buttons" "buttons" class='mdl-navigation__link'}}
      <!-- links... -->
      <a class='mdl-navigation__link github-link drawer' href='https://github.com/truenorth/ember-material-lite' target='_blank'>
        <i class="material-icons">code</i>
        GitHub
      </a>
    </nav>
  {{/mdl-nav-drawer}}

  {{#mdl-nav-content}}
    {{ outlet }}
  {{/mdl-nav-content}}
{{/mdl-nav}}

I’m not really sure about the drawbacks here, but i think they are the same @pranksinatra pointed out.