Dropdown menu in Durandal 2.0 -

i trying make multilevel menu. menu should contain both 1 level, in section 2 levels, , 3 levels. sections can not placed in row. example menu:

i wrote google's group durandaljs, nobody explained doing wrong. found example not work.

appeal people understand such things: 1. how should organize logic of menu. 2. how bind data view 3. need use childrouter this?

i hope help.

ok, answer modification of previous routing answer allowing time multiple levels (question 3 levels i'll provide general answer number of levels).

model

as in previous answer, i'll not use durandal child routers (reason stated in description of linked earlier answer). instead provide own way of defining "embedded" routes.

let's assume having following model

var model = [                 {                     route: '',                     moduleid: 'viewmodels/home',                     title: 'validation test',                     nav: true,                     hash: ''                 },                 {                     route: 'samples',                     moduleid: 'viewmodels/samples',                     modulerootid: 'viewmodels', // custom property make child routes easier                                   title: 'samples',                     nav: true,                     hash: 'samples',                     childroutes: [                         { route: 'simplelist', moduleid: 'simplelist', title: 'simplelist',  nav: true, hash : 'simplelist', childroutes: [                             { route: 'simplelista', moduleid: 'simplelista', title: 'simplelista',  nav: true, hash : 'simplelista' },                             { route: 'simplelistb', moduleid: 'simplelistb', title: 'simplelistb',  nav: true, hash : 'simplelistb' } ] },                         { route: 'clickcounter', moduleid: 'clickcounter', title: 'click counter', nav: true, hash : 'clickcounter' }                     ]                 }             ]; 

we have 2 0-level (top level) routes (home , samples), 2 1-level (childs of sample - simplelist , clickcounter) , 2 2-level (childs of simplelist - simplelista , simplelistb).

transformation

what durandal expects have list of routes. need transform our nice model structure list of routes (with changes hash, moduleid [i assume structure of viewmodel folder same our routes i.e. simplelist , clickcounter viewmodels in subfolder, same simplelista , simplelistb])

algorithm tree traverse , flatting.

function flatroutes (routes, level, path, parent) {     var output = []     $.each(routes, function(index, route) {         route.route = path  + route.route;         route.moduleid = path  + route.moduleid;         route.hash = '#' + path  + route.hash;         route.parent = parent;         route.level = level;     output = output.concat(route)     if (route.childroutes !== undefined) output = output.concat(flatroutes(route.childroutes, level + 1, route.route + '/', route.route))     })     return output;     }  function createroutes (routes) {     return flatroutes(routes, 0, '', '')  } 

as routes need registered , router activated:

var routes = createroutes(model); return router.map(routes)              .buildnavigationmodel()              .activate(); 

rendering

sorry, part not tested i'm not using durandal / knockout stack anymore.

in shellvm (or somewhere else want bind router knockout) need function finding child routes given parent.

function findroutes (parent) {     var output = []     $.each(router.navigationmodel, function(index, route) {         if(route.paent === parent) output = output.concat(route)     }     return output; } 

and in knockout / html part need use recursive templates knockout.

<script id="treeelement" type="text/html">     <li>         <span data-bind="text: title"></span>         <ul data-bind="template: { name: 'treeelement', foreach: $root.vm.findroutes($data.moduleid) }">         </ul>      </li> </script>      <ul data-bind="template: { name: 'treeelement', foreach: $root.vm.findroutes('') }"></ul> 

of course it's rendering router simple mulitlevel list - need change according want achieve , css framework using. should easy.