当我使用aurelia创建动态子路由时,如何对页面的不同部分和其他页面进行内部滚动?

时间:2016-06-16 09:18:08

标签: submenu aurelia

我在问题编号:34486644的回答中应用了相同的逻辑 或者看到链接

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

但问题是它显示“未找到路线”。

在我的JS文件中,我添加了:

JS File Route not Found error

另外,我的应用程序中有##url [localhost / appname /#/ modulename]#是否会产生一些问题?如果没有那么问题是什么?

我正在使用的代码示例:

对于动态路由: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' }
                ]
            }
        }

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

1 个答案:

答案 0 :(得分:1)

所以问题是没有采取正确的路线,我找到了正确导航的解决方案。

1)向HTML文件中的href添加点击事件

dateTimePicker.Value.Date

2)在你的JS文件

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

3)创建正确的路线

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');
    }
}