Parse.Router 深link 时找不到参考文件
Parse.Router cannot find reference files when deep link
我一直在慢慢寻找使用 parse.js 构建单页网站的方法,其中包括 Parse.Router。
今天终于通过修改我的.htaccess文件解决了点击浏览器刷新按钮导致404错误的问题
我现在面临的问题是,如果我导航到 "localhost/root/profile/edit",然后单击浏览器刷新按钮,我的页面是正常的,但 none 的资源会正确加载。事实上,我在控制台中收到此错误:
SyntaxError: expected expression, got '<'
我可以在控制台中看到它正在尝试从 "localhost/root/profile/js/file.js" 加载我的文件,而不是它们在我的根目录中的位置。奇怪的是,当我在 "localhost/root/profile" 处单击刷新时,一切都正常加载。只是更深一层,它不起作用。
这是我的 .htaccess 文件:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ [R,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/index\.php
RewriteRule (.*) index.php
</ifModule>
这是我的 app.js 文件,已加载到我的主 index.php 文件中:
// app.js
$(function() {
Parse.$ = jQuery;
Parse.initialize("xxxx", "xxxx");
// * ---------
// * 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: {
'click .edit-profile': 'edit'
},
edit: function(){
Parse.history.navigate("profile/edit", true);
return false;
},
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
});
// * ------------
// * Edit View
// * ------------
var EditView = Parse.View.extend({
template: Handlebars.compile($('#edit-profile-tpl').html()),
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
});
// * ------------
// * Parse Router
// * ------------
var MyRouter = Parse.Router.extend({
initialize: function(options){
this.user = Parse.User.current();
$("body").on("click","a:not(a[data-bypass])",function(e){
// block the default link behavior
e.preventDefault();
// take the href of the link clicked
var href = $(this).attr("href");
// pass this link to Parse
Parse.history.navigate(href,true);
});
},
start: function(){
Parse.history.start({
root: App.ROOT,
pushState: true,
silent: false
});
},
routes: {
"": "root",
"profile": "profile",
"profile/edit": "editProfile",
"*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});
}
},
editProfile: function() {
var editView = new EditView({ model: this.user });
editView.render();
$('.main-container').html(editView.el);
},
notFound: function() {
console.log("in the not found");
}
}),
var App = {
ROOT: "/root/",
router: new MyRouter()
};
App.router.start();
});
非常感谢任何帮助。
这最终成为我源文件的 src 路径的问题。
我正在请求我的源文件,例如:
<link href="css/bootstrap.min.css" rel="stylesheet">
当我应该像这样请求他们时:
<link href="/root/css/bootstrap.min.css" rel="stylesheet">
进行此调整后,现在一切似乎都按预期工作。
我一直在慢慢寻找使用 parse.js 构建单页网站的方法,其中包括 Parse.Router。
今天终于通过修改我的.htaccess文件解决了点击浏览器刷新按钮导致404错误的问题
我现在面临的问题是,如果我导航到 "localhost/root/profile/edit",然后单击浏览器刷新按钮,我的页面是正常的,但 none 的资源会正确加载。事实上,我在控制台中收到此错误:
SyntaxError: expected expression, got '<'
我可以在控制台中看到它正在尝试从 "localhost/root/profile/js/file.js" 加载我的文件,而不是它们在我的根目录中的位置。奇怪的是,当我在 "localhost/root/profile" 处单击刷新时,一切都正常加载。只是更深一层,它不起作用。
这是我的 .htaccess 文件:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ [R,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/index\.php
RewriteRule (.*) index.php
</ifModule>
这是我的 app.js 文件,已加载到我的主 index.php 文件中:
// app.js
$(function() {
Parse.$ = jQuery;
Parse.initialize("xxxx", "xxxx");
// * ---------
// * 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: {
'click .edit-profile': 'edit'
},
edit: function(){
Parse.history.navigate("profile/edit", true);
return false;
},
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
});
// * ------------
// * Edit View
// * ------------
var EditView = Parse.View.extend({
template: Handlebars.compile($('#edit-profile-tpl').html()),
render: function(){
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
}
});
// * ------------
// * Parse Router
// * ------------
var MyRouter = Parse.Router.extend({
initialize: function(options){
this.user = Parse.User.current();
$("body").on("click","a:not(a[data-bypass])",function(e){
// block the default link behavior
e.preventDefault();
// take the href of the link clicked
var href = $(this).attr("href");
// pass this link to Parse
Parse.history.navigate(href,true);
});
},
start: function(){
Parse.history.start({
root: App.ROOT,
pushState: true,
silent: false
});
},
routes: {
"": "root",
"profile": "profile",
"profile/edit": "editProfile",
"*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});
}
},
editProfile: function() {
var editView = new EditView({ model: this.user });
editView.render();
$('.main-container').html(editView.el);
},
notFound: function() {
console.log("in the not found");
}
}),
var App = {
ROOT: "/root/",
router: new MyRouter()
};
App.router.start();
});
非常感谢任何帮助。
这最终成为我源文件的 src 路径的问题。
我正在请求我的源文件,例如:
<link href="css/bootstrap.min.css" rel="stylesheet">
当我应该像这样请求他们时:
<link href="/root/css/bootstrap.min.css" rel="stylesheet">
进行此调整后,现在一切似乎都按预期工作。