如何使用 Mustache.js 制作客户端 I18n

Question

我有一些静态 html 文件，想要通过 Mustache.js 进行客户端修改来更改其中的静态文本。

看来这可能是 Twitter 在 github 上的 Mustache 扩展： https://github.com/bcherry/mustache.js

但是最近特定的 I18n 扩展已被删除或更改。

我想象一个解决方案，其中 http:/server/static.html?lang=en 加载 mustache.js 和基于 lang 参数 data_en 的语言 JSON 文件。 json.

然后，mustache 将 {{tags}} 替换为发送的数据。

有人可以给我一个例子如何做到这一点吗？

Answer 1

您可以将 lambda 表达式与一些库（例如 i18next 或其他库）一起使用。

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

数据通过了：

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

这解决了我的问题

Answer 2

我认为沉默的回答并没有真正解决/解释问题。

真正的问题是您需要运行 Mustache 两次（或者使用其他东西，然后再使用 Mustache）。

大多数 i18n 的工作过程分为两步，如下所示：

1. 使用给定的变量渲染 i18n 文本。
2. 使用后期渲染的 i18n 文本渲染 HTML。

选项 1：使用 Mustache 部分

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

提供给此 Mustache 模板的数据可能是：

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

然后您将所有 i18n 模板/消息存储为服务器上的 Mustache 模板的大型 JSON 对象：

下面是“en”翻译：

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

现在有一个这种方法有一个很大的问题，因为 Mustache 没有逻辑，因此处理复数等事情会变得混乱。
另一个问题是，执行如此多的部分加载，性能可能会很差（也许不会）。

选项 2：让服务器的 i18n 来完成工作。

另一种选择是让服务器执行第一遍扩展（步骤 1）。
Java 确实有很多 i18n 扩展选项，我想其他语言也有。

这个解决方案相当烦人的是你必须加载模型两次。一次使用常规模型，第二次使用扩展的 i18n 模板。这相当烦人，因为您必须确切地知道要扩展并放入模型中的 i18n 扩展/模板（否则您将必须扩展所有 i18n 模板）。换句话说，你将会遇到一些违反 DRY 的情况。

解决上一个问题的一种方法是预处理胡子模板。

Answer 3

我的答案是基于developmento的。他的回答非常好，我将添加在消息键码中使用胡子标签的可能性。如果您希望能够根据当前的 Mustache 状态或循环获取消息，那么它确实是必要的。

它基于简单的双重渲染，

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

因此由于 Mustache 在非常小的字符串上运行，因此性能不会受到影响。

这里有一个小例子：

Json 数据：

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

胡子模板：

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

消息

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

结果是：

banana is yellow
cucomber is green

复数

[编辑]：按照评论中的要求，下面是一个示例，其中包含英语和法语复数处理的伪代码。这是一个非常简单且未经测试的示例，但它给了您一个提示。

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

这非常简单，也非常直接。

首先，您需要添加代码来确定查询字符串 lang。为此，我使用摘自此处答案的片段摘自此处。

function getParameterByName(name) {

    var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(window.location.search);

    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

}

然后，我使用 jQuery 来处理 ajax 和 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);
        });
    }
});

对于这个答案，我尝试使用简单的 JSON 数据：

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

获取 此 GIST 以获得完整的 HTML 答案。

Answer 5

请务必记住其他语言与 EN 有显着不同。

在法语和西班牙语中，形容词位于名词后面。在 FR 中，“green beans”变成“haricots verts”（绿豆），因此，如果您插入变量，则翻译后的模板必须具有相反顺序的变量。例如， printf 不起作用，因为参数不能改变顺序。这就是为什么您使用上面选项 1 中的命名变量，并在整个句子和段落中使用翻译模板，而不是连接短语。

你的数据也需要被翻译，所以来自数据的“便便”这个词——不知何故必须被翻译。不同的语言对复数的理解也不同，英语也是如此，如“tooth/teeth”、“foot/feet”等。EN 中的“glasses”和“pants”也始终是复数。其他语言也同样有例外和奇怪的习惯用法。在英国，IBM “正在”参加贸易展，而在美国，IBM “正在”参加贸易展。俄语对复数有几种不同的规则，具体取决于它们是人、动物、狭长物体等。在其他国家/地区，千位分隔符是空格、点或撇号，在某些情况下不能使用 3 位数字：4 in日本，印度则不一致。

满足于平庸的语言支持；工作量太大了。

不要将语言的变化与国家的变化混为一谈——瑞士、比利时和加拿大也有说法语的，更不用说塔希提岛、海地和乍得了。奥地利讲 DE，阿鲁巴讲 NL，澳门讲 PT。