Parse.Router - 浏览器刷新按钮返回 index.html

Question

我正在尝试使用 Parse.com 的 parse.js 框架设置网站。框架中包含 Parse.Router（Backbone.Router 的一个分支，但在执行上似乎略有不同；但我可能是错的）。

我的工作正常，但我遇到了这样一个问题，即当我在“localhost/root/profile”之类的页面上并单击刷新按钮时出现 404 错误。经过一番搜索后，我采用了修改我的 .htaccess 文件的方法，以便触发重定向到我的单页应用程序“index.html”。现在的问题是，当重新加载此页面时，它似乎也重新启动了路由器，从而将我返回到“localhost/root”而不是“localhost/root/profile”。谁能告诉我哪里出错了？

这是我的 .htaccess 文件：

// .htaccess
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

这是我的 app.js 文件，加载到我的主 index.html 文件中：

// app.js
$(function() {
    Parse.$ = jQuery;

    Parse.initialize("xxxx", "xxxx");

    // * --------------
    // * Navigation Bar
    // * --------------
    var NavigationView = Parse.View.extend({
        template: Handlebars.compile($('#navigation-tpl').html()),
        events: {
            'click .nav-link': 'link'
        },
        link: function(e) {
            // Prevent Default Submit Event
            e.preventDefault();
            var href = $(e.target).attr('href');
            myRouter.navigate(href, { trigger: true });
        },
        render: function() {
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });

    // * ---------
    // * Root View
    // * ---------
    var RootView = Parse.View.extend({
        template: Handlebars.compile($('#root-tpl').html()),
        events:{
        },
        render: function() {
            this.$el.html(this.template());
        }
    });

    // * ------------
    // * Profile View
    // * ------------
    var ProfileView = Parse.View.extend({
        template: Handlebars.compile($('#profile-tpl').html()),
        events: {
        },
        render: function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });

    // * ------------
    // * Parse Router
    // * ------------
    MyRouter = Parse.Router.extend({

        // Here you can define some shared variables
        initialize: function(options){
            console.log("initializing router, options: " + options);
            this.user = Parse.User.current();
        },      
        // This runs when we start the router. Just leave it for now.
        start: function(){
            Parse.history.start({
                root: "/root/",
                pushState:  true,
                silent:     false
            });
            this.navigate("", { trigger: true });
        },  
        // This is where you map functions to urls.
        // Just add '{{URL pattern}}': '{{function name}}'
        routes: {
            "":             "root",
            "profile":      "profile",
            "*nf":          "notFound"
        },
        root: function() {
            var rootView = new RootView();
            rootView.render();
            $('.main-container').html(rootView.el);
        },
        profile: function() {
            if (this.user) {
                var profileView = new ProfileView({ model: this.user });
                profileView.render();
                $('.main-container').html(profileView.el);
            }  else {
                this.navigate("root", {trigger: true});
            }
        },
        notFound: function() {
            console.log("in the not found");
        }
    }),
    myRouter = new MyRouter();
    myRouter.start();

    // * --------------------------
    // * Add Navigation to the View
    // * --------------------------
    var user = Parse.User.current();
    var navigationView;
    if (user) {
        navigationView = new NavigationView({model: user});
    } else {
        navigationView = new NavigationView();      
    }
    navigationView.render();
    $('.navigation-container').html(navigationView.el);
});

我的设置是否正确？这是我的第一次尝试（除了遵循一些教程和阅读文档），所以我可能遗漏了一些非常明显的东西。任何帮助表示赞赏。

Answer 1

在玩了几个小时之后，我发现问题不在于我的路由器在每次重新加载时都会重新启动，而在于每次启动时我都在调用：

this.navigate("", { trigger: true });

在我的 router.start 函数中，无论用户在网站的哪个位置，它都会加载主页。好的，进入下一个谜题:)