Question

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

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

是否存在针对此问题的具体做法？

Answer 1

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

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

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

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

我不认为向服务器提出经常性请求以获取翻译的文字是一种很好的做法。 SPA应该提供良好的用户体验，并且从服务器加载已翻译的文字可能是一个阻塞问题。文本不像图像，您可以在没有加载所有图像的情况下渲染页面，想象渲染没有文本的页面：o

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

Answer 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将处理绑定。

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

如何在SPA中实现多语言

2 个答案: