javascript - 动态添加文本的 i18n 翻译

Question

刚刚开始使用 i18n 在 Node.js 中翻译我的网站。我有点不知道如何翻译 DOM 加载并呈现 jade 文件后生成的文本(例如用户单击按钮后)。

我知道 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});

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

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

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

Answer 1

1. 我建议从这里开始:https://www.npmjs.com/package/i18n-express 在此页面中，您将找到我推荐的此软件包的起始说明。

2. JSON 文件应保存翻译后的键/值字符串(无论其处于哪个级别)。

3. 工作解决方案:

What I want to do is to be able to translate text that has been generated by JavaScript on the client side.

在这种情况下，您需要操作模板( View )中的现有数据，因为 i18 模块在服务器端运行。

例如，您可以将翻译后的文本存储在稍后注入(inject)到 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)