如何在 SPA 中实现多语言答案

【问题标题】：How to implement multilingualism in SPA如何在 SPA 中实现多语言
【发布时间】：2013-07-09 09:12:43
【问题描述】：

我目前正在努力解决 SPA 中的多语言问题。

我想出了几个解决方案，比如为资源 resx 文件构建一个包装器，或者将所有标签保存在数据库中，但我想知道你们中是否有人找到了一些自动化这些步骤的解决方案。

有没有针对这个问题的具体做法？

【问题讨论】：

标签： breeze single-page-application durandal hottowel

【解决方案1】：

对于合理数量的文字，我建议将资源保存在数据库或服务器中的 .RESX 文件中。当用户登录或您检测到将使用的语言时，应用程序会请求文字并保存在翻译模块的集合或浏览器的 LocalStorage 中（这可能是大数据的好方法） . 然后这个模块可以有一些方法来检索消息，可能传递一个键。

使用此解决方案，您可以将此模块注入需要显示翻译文字并通过视图访问它们的视图模型中：

<p data-bind="text: resourceManager.get('M01')"></a>

对于需要传输大量本地化数据的大型应用程序，也许可以应用某种模块化，并且只加载每个模块/部分真正需要的资源。

我不认为向服务器发出重复请求以获取翻译后的文字是一个好习惯。 SPA 应该提供良好的用户体验，从服务器加载翻译后的文字可能是一个阻塞问题。文本不像图像，您可以在没有加载所有图像的情况下渲染页面，想象一下在没有文本的情况下渲染页面：o

无论如何，我认为最好的解决方案是将服务器保留为存储库并创建一个自定义 JS 模块，该模块负责在一次或多次加载中获取数据并能够将其存储在客户端的某个位置。

【讨论】：

【解决方案2】：

我已经解决了我自己的问题，使用自定义绑定和 i18next。

首先，我实现了i18next 来翻译我的标签/按钮和其他资源。

其次，我添加了一个自定义的 Knockout bindingHandler：

ko.bindingHandlers.i18n = {
    init: function (element, valueAccessor) {        
        var translateKey = valueAccessor();
        ko.utils.setTextContent(element, $.t(translateKey));
    }
};

最后，您可以将以下代码添加到您的视图中：

<span data-bind="i18n : 'buttons.cancel'"></span>

这将自动获取正确的资源，并且 Knockout 将处理绑定。

希望这将帮助其他人解决同样的问题。

【讨论】：