Question

我的单页Web应用程序由垂直堆叠的4-5个视图组成，当用户选择菜单项时，页面将滚动到相应的视图。当您第一次进入应用程序时，这不是问题，但是如果您深入链接到菜单项，我的页面会抛出一个拟合，因为它正在尝试访问尚不存在的元素的属性。

我遇到的问题是理解为什么在路由器尝试滚动页面时元素不存在。

如果你加载/然后选择home没有问题，但如果你通过浏览器直接点击#home，当我得到jQuery未定义的错误。

未捕获的TypeError：无法读取未定义的属性“top”

内部路由器我在initialize函数中实例化并呈现我的所有视图。我的想法是初始化将始终发生在我的任何路线之前，显然不是这样。

我再次阅读了一些线程，这些线程显示了如何为单个路由的所有路由设置前后函数，但即使使用该方法，scrollToById也会失败，因为它不知道当时$（id）是什么被召唤。

define(function (require, exports, module) {

        var Backbone = require('backbone');

        return Backbone.Router.extend({
            initialize: function(){
                require(['ui/menu/menu','ui/home/home', 'ui/samples/samples', 'ui/resume/resume', 'ui/contact/contact'], 

                function(Menu, Home, Samples, Resume, Contact){

                    var menu = new Menu();
                        menu.render();

                    var home = new Home();
                        home.render();

                    var samples = new Samples();
                        samples.render();

                    var resume = new Resume();
                        resume.render();

                    var contact = new Contact();
                        contact.render();

                });
            },
            routes: {
                ''          : 'init',
                'home'      : 'home',
                'samples'   : 'samples',
                'resume'    : 'resume',
                'contact'   : 'contact'
            },
            init: function(){

            },
            home: function (){
                this.scrollToById($(".home-container"));
            },
            samples: function(){
                this.scrollToById($(".samples-container"));
            },
            resume: function(){
                this.scrollToById($(".resume-container"));
            },
            contact: function(){
                this.scrollToById($(".contact-container"));
            },
            scrollToById: function(id) {
                var val = $(id).offset().top - 127;

                $('html, body').animate({
                        scrollTop: val
                }, 2000);
            }
        });

    });

感谢任何提示或建议。

Answer 1

我认为路由器中的routes事件处理程序正在与initialize函数同时进行初始化。因此，在呈现DOM元素之前会触发路由事件。

我会尝试在Router外部创建一个新函数，其中包含当前初始化函数中的所有内容。那么该函数的最后一件事就是创建一个路由器的实例。这将确保在加载脚本和DOM之前不会调用任何路由事件。

骨干路由器＆amp;深层链接

1 个答案: