Backbone,多语言和root
Backbone, multi-language and root
我正在使用 backbone 来管理我的路由。我需要在我的网站上实现多语言,如下所示:
- 法语:www.example.com
- 英文:www.example.com/en
此外,我在我的 url 上有一个额外的根目录,所以它给出了 www.example.com/dev 或 www.example.com/dev/en
根是通过我的网络服务器(节点)提供的。它是通过下面示例中的 <%- prefix %> 变量检索的。
它在本地主机上运行良好,但是一旦我通过带有附加根的 url 我的服务器,就找不到页面。我正在寻找一种通用解决方案来管理这两种情况(有或没有 root)。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
let prefix = '<%- prefix %>'.substr(1);
var BaseRouter = Backbone.Router.extend({
routes: {
[prefix + 'imgfocus/:imgid'] : 'imgfocus',
[prefix + 'skymap/:obsids'] : 'skymap',
// ...
},
imgfocus : function(imgid)
{
navservice.loadScreen({page : 'imgfocus', imgid : imgid});
},
skymap : function(obsids, stateid, tourid)
{
navservice.loadScreen({page : 'skymap', obsids : parseInt(obsids) === 0 ? undefined : obsids, stateid : stateid, tourid : tourid});
},
/// ...
});
let br = new BaseRouter();
for (let i = 0; i < navservice.languages.length; i++)
{
if (navservice.languages[i] !== '')
{
for (let key in br.routes)
{
br.routes[navservice.formatUrl(key, navservice.languages[i]).substr(1)] = br.routes[key];
}
}
}
// language retrieval
var language = navservice.getUserLanguage();
Backbone.history.start({pushState : true, root: '/' + (language ? language : '')});
}
$(document).on("click", "a:not([data-bypass])", function (evt) {
var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
var root = location.protocol + "//" + location.host + Backbone.history.options.root;
if (href.prop && href.prop.slice(0, root.length) === root) {
evt.preventDefault();
var route = href.attr;
// language retrieval
var lang = navservice.getUserLanguage(route);
if(lang && route.slice(0,lang.length+1) === "/" + lang) {
route = route.slice(lang.length+1);
}
Backbone.history.navigate(route, {trigger : true});
}
});
}
</script>
创建不同的模板,然后使用 history root
选项:
Backbone.history.start({pushState: true, root: "/en/"})
实际上我设法通过在 backbone.js 中添加日志并检查发生了什么来修复它。
真正的问题在于路由定义中 'prefix' 变量的使用。我删除了它并完成了大部分修复。
我正在使用 backbone 来管理我的路由。我需要在我的网站上实现多语言,如下所示:
- 法语:www.example.com
- 英文:www.example.com/en
此外,我在我的 url 上有一个额外的根目录,所以它给出了 www.example.com/dev 或 www.example.com/dev/en
根是通过我的网络服务器(节点)提供的。它是通过下面示例中的 <%- prefix %> 变量检索的。
它在本地主机上运行良好,但是一旦我通过带有附加根的 url 我的服务器,就找不到页面。我正在寻找一种通用解决方案来管理这两种情况(有或没有 root)。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
let prefix = '<%- prefix %>'.substr(1);
var BaseRouter = Backbone.Router.extend({
routes: {
[prefix + 'imgfocus/:imgid'] : 'imgfocus',
[prefix + 'skymap/:obsids'] : 'skymap',
// ...
},
imgfocus : function(imgid)
{
navservice.loadScreen({page : 'imgfocus', imgid : imgid});
},
skymap : function(obsids, stateid, tourid)
{
navservice.loadScreen({page : 'skymap', obsids : parseInt(obsids) === 0 ? undefined : obsids, stateid : stateid, tourid : tourid});
},
/// ...
});
let br = new BaseRouter();
for (let i = 0; i < navservice.languages.length; i++)
{
if (navservice.languages[i] !== '')
{
for (let key in br.routes)
{
br.routes[navservice.formatUrl(key, navservice.languages[i]).substr(1)] = br.routes[key];
}
}
}
// language retrieval
var language = navservice.getUserLanguage();
Backbone.history.start({pushState : true, root: '/' + (language ? language : '')});
}
$(document).on("click", "a:not([data-bypass])", function (evt) {
var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
var root = location.protocol + "//" + location.host + Backbone.history.options.root;
if (href.prop && href.prop.slice(0, root.length) === root) {
evt.preventDefault();
var route = href.attr;
// language retrieval
var lang = navservice.getUserLanguage(route);
if(lang && route.slice(0,lang.length+1) === "/" + lang) {
route = route.slice(lang.length+1);
}
Backbone.history.navigate(route, {trigger : true});
}
});
}
</script>
创建不同的模板,然后使用 history root
选项:
Backbone.history.start({pushState: true, root: "/en/"})
实际上我设法通过在 backbone.js 中添加日志并检查发生了什么来修复它。
真正的问题在于路由定义中 'prefix' 变量的使用。我删除了它并完成了大部分修复。