Parse.Router - 浏览器刷新按钮 returns 到 index.html
Parse.Router - Browser refresh button returns to index.html
我正在尝试使用 Parse.com 的 parse.js 框架设置网站。框架中包含 Parse.Router(Backbone.Router 的一个分支,但在执行时似乎略有不同;但我可能是错的)。
我的东西运行良好,但我遇到了一个问题,当我在像 'localhost/root/profile' 这样的页面上并单击刷新按钮时,我收到了 404 错误。经过一番搜索后,我采用了修改 .htaccess 文件的方法,这样就会触发重定向到我的单页应用程序 'index.html'。现在的问题是,当这个页面被重新加载时,它似乎也重新启动了路由器,因此 return 我变成了 '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);
});
我的设置正确吗?这是我的第一次尝试(除了遵循一些教程和通读文档),所以我可能遗漏了一些非常明显的东西。感谢任何帮助。
经过几个小时的尝试,我发现问题不是我的路由器在每次重新加载时都重新启动,而是每次启动时我都在调用:
this.navigate("", { trigger: true });
在我的 router.start 函数中,无论用户在网站上的哪个位置,它都会加载主页。好的,进入下一个谜题:)
我正在尝试使用 Parse.com 的 parse.js 框架设置网站。框架中包含 Parse.Router(Backbone.Router 的一个分支,但在执行时似乎略有不同;但我可能是错的)。
我的东西运行良好,但我遇到了一个问题,当我在像 'localhost/root/profile' 这样的页面上并单击刷新按钮时,我收到了 404 错误。经过一番搜索后,我采用了修改 .htaccess 文件的方法,这样就会触发重定向到我的单页应用程序 'index.html'。现在的问题是,当这个页面被重新加载时,它似乎也重新启动了路由器,因此 return 我变成了 '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);
});
我的设置正确吗?这是我的第一次尝试(除了遵循一些教程和通读文档),所以我可能遗漏了一些非常明显的东西。感谢任何帮助。
经过几个小时的尝试,我发现问题不是我的路由器在每次重新加载时都重新启动,而是每次启动时我都在调用:
this.navigate("", { trigger: true });
在我的 router.start 函数中,无论用户在网站上的哪个位置,它都会加载主页。好的,进入下一个谜题:)