i18n Übersetzung von dynamisch hinzugefügtem Text

Question

Ich habe gerade mit i18n angefangen, um meine Website in Node zu übersetzen. Ich habe ein wenig verloren, wie man Text übersetzt, der generiert wird, nachdem das DOM geladen und die Datei gerendert wurde (wie wenn ein Benutzer auf eine Schaltfläche klickt).

Ich verstehe, dass i18n ist ein serverseitiges Modul und mein neuer Text generiert wird auf der Client-Seite.

Ich laufe auch Express, wenn das hilft.

Was ich tun möchte, ist in der Lage, Text zu übersetzen, der von Javascript auf der Client-Seite generiert wurde. Betrachten Sie eine beliebige Taste:

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. Erste Schaltfläche Text von Jade durch i18n gemacht mit (i18n .__ ('Antworten')) und ordnungsgemäß
2. Nutzer klickt auf eine Schaltfläche
3. Text geändert übersetzt über jQuery „Senden“, und nach einem AJAX-Request zurück auf „Antworten“
4. Der Button Text länger zu lesen ist nicht übersetzt, da es dynamisch war erzeugt

Gibt es eine Möglichkeit, i18n auf der Client-Seite zu verwenden, um dieses Problem zu lösen? Im Idealfall würde Ich mag nur diese Seite auf dem Client tun, aber es funktioniert nicht:

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

Answer 1

1. Ich schlage vor, beginnend hier: https://www.npmjs.com/package/i18n-express in dieser Seite findet man eine finden Start Erklärung mit diesem Paket, das ich empfehle.

2. Die JSON-Datei sollte die übersetzten Schlüssel/Wert-Strings enthalten (unabhängig davon, auf welcher Ebene sie aktiviert sind).

3. Arbeitslösung:

Was ich tun möchte, ist in der Lage sein, Text zu übersetzen, die von JavaScript auf der Clientseite generiert wurden.

In diesem Fall müssen Sie vorhandene Daten in der Vorlage (Ansicht) bearbeiten, da das i18-Modul auf der Serverseite ausgeführt wird.

Zum Beispiel können Sie den übersetzten Text wie dies später zu injizieren zu diesem Knopf in einem data-sent Attribut speichern kann:

//-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) 

Answer 2

ich es geschafft, dies zu lösen browser-i18n zu meinem öffentlichen Javascript-Ordner zu installieren (nicht via NPM), und dann die gleichen Funktionen clientseitig wie bei i18n on Node verwenden.

Das einzige Problem ist, dass Browser-i18n sieht aus wie es nicht unterstützt Werte unterstützt, wie: [0] Antworten | [1,] Antworten. i18n-for-browser kann eine mögliche Lösung sein.