How to do internal scrolling in for different parts of page and other page also ,when i am creating dynamic child routes using aurelia?

Question

I have applied same logic as given on answer of the Question No: 34486644 or see the link

How do I use a router and inbuilt/custom attributes to create dropdown menu in aurelia?

But the problem is it is showing "Route not Found".

In my JS File i have added:

Also,I have # in my app url [localhost/appname/#/modulename] Does the # is creating some problem ? If not then what is the issue ?

Code samples which i am using:

For dynamic route: moduleName.js

{
            route: 'Services',
            name: 'Services',
            nav: true,
            title: 'Services',
            moduleId: 'App/modulename/compdemo1',
            settings: {
                subMenu: [
                    { href: '#/ServicesSM1', title: 'Services 1' },
                    { href: '#/ServicesSM2', title: 'Services 2' },
                    { href: '#/ServicesSM3', title: 'Services 3' },
                    { href: '#/ServicesSM4', title: 'Services 4' }
                ]
            }
        }

For HTML : modulename.html

<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 ="javascript:void(0);" if.bind="route.settings.subMenu">
                 ${route.title}></a>

                <!--<label if.bind="route.settings.subMenu">${route.title</label>-->

                 <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>

It would be much easier to read if you just copy your error message into the question instead of providing screen shot. Also, please provide extract of YOUR code from the link. — Adam, Jun 16 '16 at 10:51

score 1 · Accepted Answer · answered Jun 20 '16 at 12:37

So the problem is it is not taking the proper route,i have found the solution to navigate it properly.

1)Add a click event to your href in HTML file

<div>
        <ul>
            <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="route.href" if.bind="route.settings.subMenu">${route.title}</a>
                <ul if.bind="route.settings.subMenu">
                    <li repeat.for="menu of route.settings.subMenu">
                        <a href="javascript:void(0);" id="subMenu" click.delegate="$parent.$parent.navigator($parent.route, menu)">${menu.title}</a>
                    </li>
                </ul>
            </li>
        </ul>   
    </div>
<div>
            <router-view></router-view>
        </div>

2)In your JS File

navigator(row, arg1) {
    //To create a proper navigation for the page.
    this.router.navigate(row.relativeHref + '?q=' + arg1.href);

    //To perform performance internal scrolling.
    var dest = 0;

    if (typeof ($('#' + arg1.href).offset()) !== "undefined") {
        if ($('#' + arg1.href).offset().top > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
        } else {
            dest = $('#' + arg1.href).offset().top;
        }
        $('html,body').animate({ scrollTop: dest }, 1000, 'swing');
    }
}

3) Create proper route

{
        route: 'Services',
        name: 'Services',
        nav: true,
        title: 'Services',
        moduleId: 'App/modulename/compdemo1',
        settings: {
            subMenu: [
                { href: 'SM1', title: 'Services 1' },
                { href: 'SM2', title: 'Services 2' },
                { href: 'SM3', title: 'Services 3' },
                { href: 'SM4', title: 'Services 4' }
            ]
        }
    }

How to do internal scrolling in for different parts of page and other page also ,when i am creating dynamic child routes using aurelia?

1 Answers1