it-swarm.com.de

Wie mache ich i18n mit Handlebars.js (Mustache-Vorlagen)

Ich verwende derzeit Handlebars.js (in Verbindung mit Backbone und jQuery), um eine Web-App fast vollständig clientseitig zu machen, und ich habe Probleme mit der Internationalisierung dieser App.

Wie kann ich diese Arbeit machen?

Gibt es Plugins?

40
mdcarter

Ich weiß, dass dies beantwortet wurde, aber ich möchte meine einfache Lösung mitteilen. Um auf die Lösung von Gazler mit I18n.js (die wir bei unserem Projekt bei der Arbeit verwenden) aufzubauen, habe ich nur einen sehr einfachen Handlebars-Helfer verwendet, um den Prozess für die schnelle Lokalisierung zu erleichtern:

Handler

Handlebars.registerHelper('I18n',
  function(str){
    return (I18n != undefined ? I18n.t(str) : str);
  }
);

Vorlage

<script id="my_template" type="x-handlebars-template">
    <div>{{I18n myVar}}</div>
</script>

Der Hauptvorteil davon ist, dass das gesamte Json-Objekt nicht kostspielig ist. Ganz zu schweigen davon, wenn der ankommende Json Objekte/Arrays verschachtelt hat, wird die Zeit, die für das Suchen und Parsen nach ihnen benötigt wird, teuer, wenn das Objekt sehr groß ist.

Prost!

81
poweratom

https://github.com/fnando/i18n-js ist ein Ruby-Edelstein, der eine Internationalisierungsdatei aus Ihrem Ordner config/locales erstellt. Wenn Sie jedoch kein Rails verwenden, finden Sie das verwendete Javascript in einem eigenen hier .

Sie speichern dann einfach die Übersetzungen in einem verschachtelten Objekt.

I18n.translations = {"en":{"date":{"formats":{"default":"%Y-%m-%d","short":"%b %d","long":"%B %d, %Y"}}}};

Etwas, das möglicherweise auch für Sie von Nutzen ist, das ich in meinen Projekten verwende, ist ein Patch für Schnurrbart, der Zeichenfolgen automatisch im Format @@ translation_key @@ übersetzt.

i18nize = function (result) {
    if (I18n) {
      var toBeTranslated = result.match(/@@([^@]*)@@/gm);
      if (!toBeTranslated) return result;
      for(var i = 0; i < toBeTranslated.length; i++) {
        result = result.replace(toBeTranslated[i], I18n.t(toBeTranslated[i].replace(/@/g, "")));
      }
    }
    return result;
};

Sie rufen dann i18nize after render auf, damit Sie Übersetzungen in Ihre Vorlagen einfügen können, anstatt sie zu übergeben.

Passen Sie auf, dass Sie den Schnurrbart nicht patchen müssen, da Sie Ihre Vorlagen nicht auf standardisierte Schnurrbartimplementierungen portieren können. In meinem Fall überwogen jedoch die angebotenen Vorteile dieses Problem.

Hoffe das hilft.

5
Gazler

Basierend auf der Antwort von @poweratom:

Nur bei ember.js , bei Optionen, die an I18n.js. übergeben werden.

Es wird magisch neu geladen, wenn berechnete Eigenschaften verwendet werden.

Ember.Handlebars.helper "t", (str, options) ->
  if I18n? then I18n.t(str, options.hash) else str

Vorlage:

{{t 'sharings.index.title' count=length}}

Yml:

en:
  sharings:
    index:
      title: To listen (%{count})
4
jvenezia

Die Frage wird beantwortet, aber es kann sein, dass Sie sich nicht auf eine i8n-lib verlassen und diese vollständig verwenden möchten. Ich benutze meine eigenen inspiriert von https://Gist.github.com/tracend/3261055

1
Sahib Khan

Mit NodeJs/Express:

  • node-i18n (Erkennen des Accept-Language-Headers)

      app.use(i18n.init); 
    
  • Beispielübersetzungsdatei

    {   
     "hello": "hello",   
     "home-page": {
       "home": "Home",
        "signup": "Sign Up"  
     } 
    }
    
  • Im Express-Controller

    ...
    data.tr = req.__('home-page');
    var template = Handlebars.compile(source);
    var result = template(data);
    
  • Lenker-Vorlage

        <li class="active"><a href="/">{{tr.home}}</a></li>
    
1
dam1

für diejenigen, die kein JS-Framework verwenden, sieht http://i18next.com auch vielversprechend aus 

erstellen Sie einfach einen Lenker-Helfer, um Übersetzungen wie hier aufzurufen http://i18next.com/pages/doc_templates.html

0
equivalent8