Comment faire i18n avec Handlebars.js (modèles de moustache)?

Question

J'utilise actuellement Handlebars.js (associé à Backbone et jQuery) pour rendre une application Web presque totalement restituée du côté client, et j'ai des problèmes avec l'internationalisation de cette application.

Comment puis-je faire ce travail?

Y a-t-il des plugins?

Answer 1

Je sais que cela a été répondu, mais je voudrais partager ma solution simple. Pour construire sur Gazler de la solution à l'aide de I18n.js (que nous utilisons avec notre projet au travail), j'ai juste utilisé un très simple Guidon de l'aide pour faciliter le processus de faire de la localisation à la volée:

Gestionnaire

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

Modèle

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

Le principal avantage de cela est qu'il n'est pas cher pré/post-traitement sur l'ensemble de l'objet json. Pour ne pas mentionner si le nouveau json a des objets imbriqués/tableaux, le temps consacré à la recherche et l'analyse pour eux peut coûter cher si l'objet est énorme.

Cheers!

Answer 2

https://github.com/fnando/i18n-js est un rubis gemme qui va créer une internationalisation de fichier à partir de votre config/locales dossier. Toutefois, si vous n'êtes pas à l'aide de rails, vous pouvez trouver le code javascript utilisé sur son propre ici.

Il vous suffit alors de stocker les traductions dans un objet imbriqué..

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

Quelque chose qui peut aussi être utiliser pour vous que j'utilise sur mes projets est un patch à moustache qui traduit automatiquement les chaînes de format @@translation_key@@

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;
};

Vous appelez ensuite i18nize après avoir rendu afin de vous permettre de mettre des traductions dans vos modèles, au lieu de les passer à travers.

Méfiez-vous de l'application de patchs moustache que vous ne serez pas en mesure de porter vos modèles standard moustache implémentations. Toutefois, dans mon cas, les avantages l'emportaient sur cette question.

Espérons que cette aide.