动态添加文本的 i18n 翻译答案

【问题标题】：i18n Translation of Dynamically Added Text动态添加文本的 i18n 翻译
【发布时间】：2017-02-08 21:40:48
【问题描述】：

刚开始使用 i18n 在 Node.js 中翻译我的网站。我有点不知道如何翻译在加载 DOM 和渲染玉文件后生成的文本（比如在用户单击按钮后）。

我了解 i18n 是一个服务器端模块，而我生成的新文本位于客户端。

如果有帮助，我也在运行 express。

我想做的是能够在客户端翻译由 javascript 生成的文本。考虑一个任意按钮：

INDEX.JADE
    form.feedback-r
        a#submitclientiddd.button.button-primary #{i18n.__('Reply')}
    // Other Jade Stuff Here
    script(src='javascripts/clientside.js', type='text/javascript')

CLIENT SIDE JS
    $("#posts").on("submit", "form.feedback-r", function(e) {
        actbutton.html("Sending").addClass("feedback").removeClass('send_reply').prop("disabled", true);
    });
... AJAX FUNCTION REQUEST AND ON SUCCESS ...
        actbutton.html("Reply").addClass("success-text").prop("disabled", false);

SERVER SIDE JS
    res.render('index', { title: 'Page Title', i18n: res});

jade 通过 i18n 渲染的第一个按钮文本 (i18n.__('Reply')) 并正确翻译
用户点击按钮
文本通过 jQuery 更改为“正在发送”，并在 AJAX 请求之后返回“回复”
按钮文本不再翻译，因为它是动态的生成

有没有办法在客户端使用 i18n 来解决这个问题？ 在最理想的情况下，我只想在客户端这样做，但它不起作用：

actbutton.html(i18n.__('Reply'));

【问题讨论】：

标签： javascript node.js internationalization node-modules i18n-node

【解决方案1】：

我建议从这里开始：https://www.npmjs.com/package/i18n-express 在此页面中，您将找到我推荐的此软件包的初始说明。
JSON 文件应包含已翻译的键/值字符串（无论其位于哪个级别）。
工作解决方案：

我想做的是能够在客户端翻译由 JavaScript 生成的文本。

在这种情况下，您需要在模板（视图）中操作现有数据，因为 i18 模块在服务器端运行。

例如，您可以将翻译后的文本存储到 data-sent 属性中的这个按钮中，如下所示：

//-INDEX.JADE
form.feedback-r
    a#submitclientiddd.button.button-primary(data-reply-text='#{i18n.__('Reply')}', data-sending-text='#{i18n.__('Sending')}') #{i18n.__('Reply')}

//-CLIENT SIDE JS
var sending_text = $('a#submitclientiddd').attr('data-sending-text');
$("#posts").on("submit", "form.feedback-r", function(e) {  actbutton.text(sending_text); });

//-AJAX FUNCTION REQUEST AND ON SUCCESS 
var reply_text = $('a#submitclientiddd').attr('data-reply-text');
actbutton.text(reply_text); //(back to reply text)

【讨论】：

嗨内特！谢谢你的帮助！我已经更新了我的问题，希望能提供一个更清晰的问题示例。
非常有趣的解决方案！我在这里看到的唯一问题是我无法翻译“发送”（如上面的示例），因为它不会被定义......有什么办法吗？
如果我理解正确，这样的东西应该适合你：在 JADE 模板中：``button(data-translated-en='#{t('buttons.sending')}') =t('buttons.hello') ``解释：#{ t('buttons.sending') } t() 函数评估 i18 语言环境文件中的字符串，#{} 你将它包含在模板中。
我的问题表述可能不对。这对于最初的玉模板很好，但我感兴趣的是在模板渲染后添加功能。如果我想在 DOM 加载后添加一个使用 Javascript 动态添加的按钮怎么办？我很确定我需要包含一些新的 javascript 库......我已经用一些代码更新了这个问题，这样你就可以看到我处于什么阶段。

【解决方案2】：

我设法通过将browser-i18n 安装到我的公共 javascript 文件夹（不是通过 NPM）来解决这个问题，然后在客户端使用与 Node 上的 i18n 相同的功能。

唯一的问题是 browser-i18n 看起来不支持范围值，比如：[0] 回复 | [1,] 回复。 i18n-for-browser 可能是一个可能的解决方案。

【讨论】：