主干、多语言和根答案

【问题标题】：Backbone, multi-language and root主干、多语言和根
【发布时间】：2017-12-06 20:41:11
【问题描述】：

我正在使用骨干网来管理我的路由。我需要在我的网站上实现多语言，如下所示：

法语：www.example.com
英文版：www.example.com/en

此外，我的生产网址上有一个额外的根目录，因此它提供 www.example.com/dev 或 www.example.com/dev/en

根是通过我的网络服务器（节点）提供的。在下面的示例中，它是通过变量检索到的。

它在 localhost 上运行良好，但是一旦我使用带有附加根的 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>

【问题讨论】：

标签： javascript backbone.js routes localization

【解决方案1】：

创建不同的模板，然后使用history root 选项：

Backbone.history.start({pushState: true, root: "/en/"})

更多信息backbone history start。

【讨论】：

【解决方案2】：

实际上，我设法通过在主干.js 中添加日志并检查发生了什么来修复它。

真正的问题在于路由定义中“前缀”变量的使用。我删除了它，大部分修复都完成了。

【讨论】：

你知道它为什么会导致问题吗？
其实我并没有真正理解“root”变量是如何工作的。这就是问题所在。据我了解，网址的管理方式如下：[域名] + [root] + [route]。所以我只是从我的代码中删除了“前缀”并将其放入根目录中。就是这样！