Question

我使用Parse-SDK-JS，Handlebars.js和哈希路由来创建动态网页。当用户点击任何链接时，我会通过以下方式使用网址调用模板：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>

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

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

我希望这是有道理的。

如何将用户始终发送到div＆＃34; container＆＃34;将新模板加载到我的视图中时？

Answer 1

我在生成View之后滚动到一个元素中解决了这个问题。

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

使用javascript哈希路由器

1 个答案: