使用 javascript 哈希路由器锚定到元素

Question

我正在使用Parse-SDK-JS、Handlebars.js 和哈希路由来创建动态网页。当用户点击任何链接时，我会通过以下方式使用 URL 调用模板：http://www.website.com/#/admin。

路由器

BlogApp.Router = Parse.Router.extend({

        start: function () {
            Parse.history.start({root: '/beta/'});
        },

        routes: {
            '': 'index',
            'blog/:url': 'blog',
            'category/:url': 'category',
            'admin': 'admin',
            'login': 'login',
            'reset': 'reset',
            'logout': 'logout',
            'add': 'add',
            'register': 'register',
            'editprofile': 'editprofile',
            'changeprofilepic': 'changeprofilepic',
            ':username': 'userprofile'
        },

        index: function () {
            BlogApp.fn.setPageType('blog');

            $blogs = [];

            if (!currentUser) {
                Parse.history.navigate('#/register', {trigger: true});
                console.log("There is no logged in user.");
            } else {
               var groupId = currentUser.get('groupId');
               var designsQuery = new Parse.Query(BlogApp.Models.Blog).equalTo('groupId', groupId).include('author').descending('lastReplyUpdatedAt').limit(50);
               designsQuery.find({success: function (blogs) {

                for (var i in blogs) {
                    var des = blogs[i].toJSON();
                    des.author = blogs[i].get('author').toJSON();
                    $blogs.push(des);
                }
                // console.log(blogs);

                BlogApp.fn.renderView({
                    View: BlogApp.Views.Blogs,
                    data: {blogs: $blogs}

                });
            }, error: function (blogs, e) {
                console.log(JSON.stringify(e));
            }}); 
           }
       },
});

查看

BlogApp.Views.Blogs = Parse.View.extend({
        template: Handlebars.compile($('#blogs-tpl').html()),
        className: 'blog-post',

        render: function () {
            var collection = {blog: []};
            collection = {blog: this.options.blogs};
            this.$el.html(this.template(collection));
        },
    });

我的问题是，在加载新模板时，用户没有被发送到页面顶部，即以下 div：

<div id="main-nav"></div>

如果新页面比当前页面长，用户在页面上的滚动位置不会改变。用户只是在页面中间的某个地方结束，因为新模板已加载但他们没有锚定任何新的地方。

通常在HTML 中，我会打开一个新页面到一个特定的锚点，如果我愿意的话：http://www.website.com/page#container，但是通过我设置我的哈希路由的方式，锚点是 模板调用本身，所以我不能这样做：http://www.website.com/#/admin#container。

我希望这是有道理的。

如何在将新模板加载到我的视图中时始终将用户发送到 div“容器”？

Answer 1

我通过在生成视图后滚动到一个元素来解决这个问题。

        cookies: function () {
            BlogApp.fn.setPageType('cookies');
            BlogApp.fn.renderView({
                View: BlogApp.Views.Cookies
            });

            document.getElementById('main-nav').scrollIntoView();
        },

更好...通过在将数据渲染到 View 对象后添加 scrollIntoView() 函数，这样它就适用于路由器中的所有链接，而无需太多复制意大利面。

BlogApp.fn.renderView = function (options) {
        var View = options.View, // type of View
            data = options.data || null, // data obj to render in the view
            $container = options.$container || BlogApp.$container, // container to put the view
            notInsert = options.notInsert, // put the el in the container or return el as HTML
            view = new View(data);
            view.render();
            if (notInsert) {
                return view.el.outerHTML;
            } else {
                $container.html(view.el);
                document.getElementById('main-nav').scrollIntoView();
            }
        };