Comment faire i18n avec guidon.js (moustache templates)?

j'utilise actuellement le guidon.js (associé à la colonne vertébrale et jQuery) pour faire une application web presque totalement côté client rendu, et j'ai des problèmes avec l'internationalisation de cette application.

Comment faire pour que ça marche?

existe-il des plugins?

40
demandé sur Simon Adcock 2011-10-14 00:57:32

6 réponses

je sais que cela a été répondu, mais je voudrais partager ma solution simple. Pour construire sur la solution de Gazler en utilisant I18n.js (que nous utilisons avec notre projet au travail), je viens d'utiliser un assistant de guidon très simple pour faciliter le processus de faire la localisation à la volée:

Gestionnaire

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

Template

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

le principal avantage de ceci est qu'il n'y a pas de traitement pré/post coûteux sur l'objet JSON entier. Sans compter que si le JSON entrant a emboîté des objets/tableaux, le temps passé à les chercher et à les analyser pourrait devenir cher si l'objet est énorme.

Cheers!

79
répondu poweratom 2012-01-10 04:24:05

https://github.com/fnando/i18n-js est un rubis gem qui va créer un fichier d'internationalisation à partir de votre dossier config/locales. Cependant, si vous n'utilisez pas les rails, vous pouvez trouver le javascript utilisé seul ici.

vous stockez alors simplement 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 dans le 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 alors i18nize après render pour vous permettre de mettre des traductions dans vos gabarits au lieu de les passer à travers.

attention à ne pas patcher la moustache car vous ne serez pas en mesure de porter vos gabarits aux implémentations de moustache standard.

J'espère que cela vous aidera.

4
répondu Gazler 2015-11-11 10:32:41

basé sur la réponse de @poweratom:

braise.js, idem avec les options passées à I18n.js.

il va se recharger par magie si les propriétés calculées sont utilisées.

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

Modèle:

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

Yml:

en:
  sharings:
    index:
      title: To listen (%{count})
3
répondu jvenezia 2015-02-09 18:56:11

NodeJs / Express:

  • node-i18n ( détecter les-tête Accept-Language )

      app.use(i18n.init);

  • Exemple de fichier de traduction

    {   
 "hello": "hello",   
 "home-page": {
   "home": "Home",
    "signup": "Sign Up"  
 } 
}

  • en contrôleur Express

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

  • Modèle De Guidon

        <li class="active"><a href="/">{{tr.home}}</a></li>
1
répondu dam1 2018-04-09 14:08:34

pour ceux qui n'utilisent pas toute JS cadre http://i18next.com a l'air prometteur trop

il suffit de créer handlebars helper pour appeler des traductions comme ici http://i18next.com/pages/doc_templates.html

0
répondu equivalent8 2015-02-23 16:48:05

on répond à la question, mais il se peut qu'il s'agisse d'un cas où vous ne voulez pas dépendre d'une quelconque i8n lib et utiliser complètement la vôtre. J'utilise mon propre inspiré de https://gist.github.com/tracend/3261055

0
répondu Sahib Khan 2017-10-26 15:41:40