About the language globalization

Question

How to make the meteor application support multiple languages ? for example ：Chinese,English.

The first,I try to use the Handlebars.registerHelper and Session ,but I'm failed.

The test.js code :

    Handlebars.registerHelper('language',function(arg){
        var nalization = Session.get('nalization');
        console.log(nalization);
        var language = Session.get("language")[nalization];
        if (!language){
            console.log("nalization"+nalization+" is undefined");
            return "";
        }
        console.log(arg);
        return language[arg] ? language[arg] : "undefined";
    });

    Template.hello.created = function(){
        Session.set('nalization','cn');
    }

    Deps.autorun(function (c) {
        Session.set("language",{
            cn : {
                hello: "你好",
                language: "Language"
            },
            en : {
                hello: "Hello",
                language: "语言"
            }
        });
        c.stop();
    });
    Template.hello.events = {
        "click #language_cn":function(){
            Session.get("nalization") !== "cn" ? Session.set("nalization","cn") : 1=1;
        },
        "click #language_en":function(){
            Session.set("nalization","en");
            console.log();
        }

    }

The test.html code :

<body>
  {{> hello}}
</body>

<template name="hello">
<h1>{{#language "hello"}}{{/language}}</h1>
 <label>{{#language "language"}}{{/language}}</label>
  <button id="language_cn">中文</button>
  <button id="language_en">English</button>
</template>

changed the value 'nalization' in Seesion by click events，but the value is not change in registerHeloer .nothing happen on html.

Any idea about the language globalization ? Thanks.

Answer 1

Look at the last paragraph on this page : https://github.com/raix/Meteor-handlebar-helpers

mrt add handlebar-helpers

There's the getText helper in the handlebars-helper package. You can see the source code at the end of this file : https://github.com/raix/Meteor-handlebar-helpers/blob/master/helpers.operators.js

About your code, I wouldn't use a session to store the language file/resources. The session should be used mainly to create reactive data. Also I don't really undersand why you use this Deps.autorun.

Answer 2

Language = new Meteor.Collection();

session.setDeafault("language","EN_US");

Deps.autorun(function(c){
  var languages = [
    {
      name:"EN_US",
      value:{
         username:"username",
         password:"password"
      }
    },
    {
      name:"ZH_CN",
      value:{
         username:"yonghu",
         password:"mima"
      }
    }
  ];
  if(Language.find({}).fetch().length)
      Language.remove({});
  for(index in languages){
    Language.insert(languages[index]);
  }
  c.stop();
});

Handlebars.helpers('language',function(){
  return Language.findOne({name:Session.get("language")}).value;
});

/**
    Change  language by click events
    for example:
    "click #chooseLanguage":function(){
          Session.set("language","ZH_CN");
    }

    in the html:
  <label>  {{language.username}}</label>
  <label>  {{language.password}}</label>

*/

Answer 3

What about the package http://messageformat.meteor.com/docs#features ?

$ mrt add messageformat

Its features are:

Reactive (strings will update themselves when variables or language changes) Supports MessageFormat selectformat (e.g. for gender), plural and offset extensions Full translation Web UI, no need to redeploy your app as new translations arrive Language data can be sent on initial page load, or on demand when required (a reactive ready() method is supplied for good UI). Examples are here: http://messageformat.meteor.com/examples