Ad

How Do I Use A Router And Inbuilt/custom Attributes To Create Dropdown Menu In Aurelia?

- 1 answer

Twitter bootstrap has a dropdown menu option; where a menu has have multiple layers. See: http://getbootstrap.com/javascript/#dropdowns

How can I use Aurelia.js's routers to recreate this? Routers normally provide 1 level. I need 2 levels.

Ad

Answer

Credit for this goes to: https://github.com/adarshpastakia.

I "borrowed" most of this person's code to answer this question. You can find it at: https://gist.github.com/adarshpastakia/5d8462b5bc8d958d5cb3

Here are steps to answer the question above:
(1) In the router, add a "settings" property. It can be whatever you want. Here is an example:
settings:{ subMenu:[ {href:'#/sub1', title:'Submenu 1'}, {href:'zoldello.wordpress.com', title:'Submenu 2'}, {href:'#/sub3', title:'Submenu 3'} ] }

Note: (a)It must be called "settings" (b) Aurelia currently ignores custom code you write outside "settings" (c)In "settings", you can place any property in it you like

(2)
(a) From (1) above, if you need the submenu to route to a part of the page, in href (or whatever you call it) use "#sub1"; where "sub1" refers to a different route where nav is set to false.
(b) If you want a hyperlink independent of routing, set href (or whatever you call it) to the url you desire (I used "zoldello.wordpress.com" in my example). No need to add a additional route

(3) Follow the basic aurelia rules of building DOM (repeat, template etc)

Here is an example:

HTML file

<li repeat.for="route of router.navigation">
  <!-- if route has no submenu -->
  <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>

  <!-- if route has submenu -->
  <a href.bind="javascript:;" class="dropdown-toggle" data-toggle="dropdown" 
  role="button" aria-haspopup="true" aria-expanded="false" if.bind="route.settings.subMenu">
  ${route.title} <span class="caret"></span></a>

  <ul if.bind="route.settings.subMenu">
    <li repeat.for="menu of route.settings.subMenu">
      <a href.bind="menu.href">${menu.title}</a>
    </li>
  </ul>
</li>



Javascript file

configureRouter(config) {
  config.map([{
    route:'home',
    title:'Home',
    nav:true,
    module:'home'
  },{
    route:'top-menu',
    title:'Top Menu',
    nav:true,
    settings:{
      subMenu:[
        {href:'#/sub1', title:'Submenu 1'},
        {href:'zoldello.wordpress.com', title:'Submenu 2'},
        {href:'#/sub3', title:'Submenu 3'}
      ]
    }
  }, {
    route:'sub1',
    title:'Submenu 1',
    nav:false,
    moduleId:'module'
  }, {
    route:'sub2',
    title:'Submenu 2',
    nav:false,
    moduleId:'module'
  }, {
    route:'sub3',
    title:'Submenu 3',
    nav:false,
    moduleId:'module'
  }, {
    route:'sub2',
    title:'Submenu 2',
    nav:false,
    moduleId:'module'
  }, {
    route:'sub3',
    title:'Submenu 3',
    nav:false,
    moduleId:'module'
  }])
}
Ad
source: stackoverflow.com
Ad