How to make I18n client side with mustache.js

Question

I have some static html files and you want to change the static text inside with the modification of the client side via mustache.js.

it looks like it was possibly an extension of Twitter mustache on github: https://github.com/bcherry/mustache.js

But recently, the I18n extension has been removed or changed.

I present a solution in which http:/server/static.html?lang=en loads mustache.js and a JSON file in a language based on the lang parameter data_en.json .

Then the mustache replaces {{tags}} with the data sent.

Can someone give me an example how to do this?

Answer 1

You can use lambdas along with some library like i18next or something else.

 {{#i18n}}greeting{{/i18n}} {{name}} 

And the data is transmitted:

 { name: 'Mike', i18n: function() { return function(text, render) { return render(i18n.t(text)); }; } } 

This solved the problem for me

Answer 2

I do not think the Quiet answer really solves / explains the problem.

The real problem is that you need to run Mustache twice (or use something else and then Mustache).

This i18n itself works as a two-step process, for example:

• Display i18n text with the given variables.
• Edit the HTML text with the text made after the i18n message.

Option 1: Use Mustache Parts

 <p>{{> i18n.title}}</p> {{#somelist}}{{> i18n.item}}{{/somelist}} 

The data presented to this mustache pattern can be:

 { "amount" : 10, "somelist" : [ "description" : "poop" ] } 

Then you will store all your i18n templates / messages as a massive mustache template JSON object on the server:

The following are translations of "en":

 { "title" : "You have {{amount}} fart(s) left", "item" : "Smells like {{description}}" } 

Now there is a rather big problem with this approach that Usa has no logic, so handling things like pluralization becomes messy. Another problem is that performance can be poor, doing so many partial loads (maybe not).

Option 2. Let the i18n server do the work.

Another option is to allow the server to complete the first expansion pass (step 1). Java has many i18n extension options. I assume other languages ​​also work.

What is pretty unpleasant about this solution is that you have to download your model twice. Once with a regular model and a second time with i18n advanced templates. This is quite annoying, as you will need to know exactly which i18n extensions / templates to expand and put into the model (otherwise you will have to expand all i18n templates). In other words, you will have good DRY violations.

One way to solve the previous problem is to pre-process mustache patterns.

Answer 3

My answer is based on development. He is a very good answer, I’ll just add the ability to use mustache labels in the message code. This is really necessary if you want to receive messages in accordance with the current state of the mustache or in cycles

It is based on simple dual visualization.

  info.i18n = function(){ return function(text, render){ var code = render(text); //Render first to get all variable name codes set var value = i18n.t(code) return render(value); //then render the messages } } 

Thus, the performances will not be affected due to the fact that the mustache works on a very small string.

Here is a small example:

JSON data:

  array : [ { name : "banana"}, { name : "cucomber" } ] 

Mustache Pattern:

 {{#array}} {{#i18n}}description_{{name}}{{/i18n}} {{/array}} 

Messages

 description_banana = "{{name}} is yellow" description_cucomber = "{{name}} is green" 

Result:

 banana is yellow cucomber is green 

Multiple

[Edit]: as indicated in the commentary, an example with a pseudo-plural processing code for English and French is given. This is a very simple and untested example, but it tells you.

 description_banana = "{{#plurable}}a {{name}} is{{/plurable}} green" (Adjectives not getting "s" in plurals) description_banana = "{{#plurable}}Une {{name}} est verte{{/plurable}}" (Adjectives getting an "s" in plural, so englobing the adjective as well) info.plurable = function() { //Check if needs plural //Parse each word with a space separation //Add an s at the end of each word except ones from a map of common exceptions such as "a"=>"/*nothing*/", "is"=>"are" and for french "est"=>"sont", "une" => "des" //This map/function is specific to each language and should be expanded at need. } 

Answer 4

It is quite simple and quite simple.

First you need to add code to define the lang query string. For this, I use a snippet taken from the answer here .

 function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)') .exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); } 

And then I use jQuery to handle the state of ajax and onReady :

 $(document).ready(function(){ var possibleLang = ['en', 'id']; var currentLang = getParameterByName("lang"); console.log("parameter lang: " + currentLang); console.log("possible lang: " + (jQuery.inArray(currentLang, possibleLang))); if(jQuery.inArray(currentLang, possibleLang) > -1){ console.log("fetching AJAX"); var request = jQuery.ajax({ processData: false, cache: false, url: "data_" + currentLang + ".json" }); console.log("done AJAX"); request.done(function(data){ console.log("got data: " + data); var output = Mustache.render("<h1>{{title}}</h1><div id='content'>{{content}}</div>", data); console.log("output: " + output); $("#output").append(output); }); request.fail(function(xhr, textStatus){ console.log("error: " + textStatus); }); } }); 

For this answer, I am trying to use simple JSON data:

 {"title": "this is title", "content": "this is english content"} 

Get this GIST for a complete HTML response.

Answer 5

Be sure to remember that other languages ​​are significantly different from EN.

In FR and ES, adjectives come after a noun. "green beans" becomes "haricots verts" (beans green) in FR, so if you connect variables, your translated templates should have the variables in the reverse order. So, for example, printf will not work, because the arguments cannot change the order. That's why you use named variables, as in Option 1 above, and translate templates into whole sentences and paragraphs, rather than combining phrases.

Your data must also be translated, so the word "poop" that comes from the data must somehow be translated. Different languages ​​have the plural in different ways, like English, like in teeth / teeth, legs / feet, etc. EN also has glasses and trousers that always have the plural. Other languages ​​also have exceptions and strange icons. In the UK, IBM "is" at the exhibition, while in the USA, IBM is "at" the exhibition. Russians have several different rules for the plural, depending on whether they are people, animals, long narrow objects, etc. In other countries, thousands are separated by spaces, dots, or apostrophes, and in some cases do not work on 3 digits: 4 in Japan, inconsistently in India.

Be content with mediocre language support; it's too much work.

And do not confuse a changing language with a changing country. There are also FR rapporteurs in Switzerland, Belgium, and Canada, not to mention Tahiti, Haiti, and Chad. Austria says DE, Aruba says NL, and Macau says PT.