RequireJS：如何为路径添加前缀答案

【问题标题】：RequireJS: how to add a prefix to pathRequireJS：如何为路径添加前缀
【发布时间】：2015-01-30 14:50:27
【问题描述】：

我正在使用 Knockout.js V3 和 RequireJS 开发一个 SPA。

我有 ko 组件是这样写的：

define(['text!settings.html'],
    function( htmlString) {
        'use strict';

       function SettingsViewModel(params) {
           ...
       }
        // Return component definition
        return {
            viewModel: SettingsViewModel,
            template: htmlString
        };
    });

现在我想支持本地化，为此我为每种支持的语言复制了 html，例如：

en/settings.html
de/settings.html
se/settings.html

我想让用户更改语言并用新语言刷新应用程序，是否可以指示要求文本插件将语言前缀添加到所有 html，所以当我写的时候：

text!settings.html

它将实际加载：

text!de/settings.html

【问题讨论】：

你看过 i18n 插件吗？ requirejs.org/docs/api.html#i18n 但是，这也可能对更改区域设置后如何重新加载您的内容感兴趣：github.com/jrburke/requirejs/issues/213
@PabloRomeo - 谢谢，不幸的是，它是一个大应用程序，i18n 和 l10n 已经以某种方式实现（复制每种语言的 html 文件），所以我无法改变它以按照 requireJS 想要的方式工作.
哦，我明白了。好吧，也许 require.replace 插件（github.com/SBoudrias/require.replace）可以这样改变路径，但仍然不会破坏 r.js
看起来很有希望，我一定会看看
不幸的是替换插件只支持 js 而不是 HTML :(

标签： javascript html knockout.js requirejs single-page-application

【解决方案1】：

不确定是否可以让文本插件在 URL 前添加前缀。您可以做的是创建一个自定义模板加载器：

var templateFromLanguageUrlLoader = {
    loadTemplate: function(name, templateConfig, callback) {
        if (templateConfig.languageUrl) {
            // Language from config or default language
            var lang = templateConfig.lang || 'de';
            var fullUrl = lang + '/' + templateConfig.languageUrl;
            $.get(fullUrl, function(markupString) {
                ko.components.defaultLoader.loadTemplate(name, markupString, callback);
            });
        } else {
            // Unrecognized config format. Let another loader handle it.
            callback(null);
        }
    }
};

// Register it
ko.components.loaders.unshift(templateFromLanguageUrlLoader );

然后你的组件看起来像这样：

define([],
    function() {
        'use strict';

       function SettingsViewModel(params) {
           ...
       }
        // Return component definition
        return {
            viewModel: SettingsViewModel,
            template: { 
                languageUrl: 'settings.html',
                language: 'nl' // overwrite default
            }
        };
    });

【讨论】：

这是我的第一个想法，但这意味着我必须检查很多文件并更改它们，还要让团队知道从现在开始我们编写模块有点不同，我会尝试巴勃罗的第一个，如果它不起作用，我会采用这种方法
好的，但我认为如果您使用文本插件，一旦语言发生变化，您将很难切换模板。如果您有自定义模板加载器，您还可以在该加载器中处理模板的切换。

【解决方案2】：

最终我采用了不同的解决方案，我只是在路径中添加了一个变量：

define(['text!' + globals.bundlePath + 'settings.html']

这个变量是从会话存储中初始化的（如果没有找到，则为默认值），因此当用户更改语言时，我将其保存在会话存储中并刷新应用程序，这样页面现在就加载了新语言.

【讨论】：