Question

我正在使用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

我想让用户更改语言并使用新语言刷新应用程序，是否可以指示require text插件为所有html添加语言前缀，所以当我写道：

text!settings.html

它实际上会加载：

text!de/settings.html

Answer 1

不确定是否可以让文本插件前缀为网址。您可以做的是创建自定义模板加载器：

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
            }
        };
    });

Answer 2

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

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

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

RequireJS：如何为路径添加前缀

2 个答案: