9

私はいくつかの静的な html ファイルを持っており、mustache.js を使用してクライアント側の変更を加えて内部の静的テキストを変更したいと考えています。

これは github の Twitter の口ひげ拡張機能で可能だったようです: https://github.com/bcherry/mustache.js

しかし最近、特定の I18n 拡張機能が削除または変更されました。

lang param に基づく言語 JSON ファイルをhttp:/server/static.html?lang=enロードするソリューションを想像します。mustache.jsdata_en.json

次に、mustache は{{tags}}を送信されたデータに置き換えます。

誰かがこれを行う方法の例を教えてもらえますか?

4

5 に答える 5

6

i18next などのライブラリと一緒にラムダを使用できます。

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

そして渡されたデータ：

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

これで問題は解決しました

于 2014-03-14T18:01:26.777 に答える
2

私の答えはdevelopingoのものに基づいています。彼の答えはとても素晴らしいです。メッセージ キーコードで口ひげタグを使用する可能性を追加します。現在の口ひげの状態に応じて、またはループでメッセージを取得できるようにしたい場合は、本当に必要です

単純な二重レンダリングに基づいています

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

このように、ヒゲは非常に小さな弦で動作するため、パフォーマンスはヒットしません。

ここにちょっとした例があります:

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.
}
于 2014-06-16T08:30:52.420 に答える
0

他の言語は EN とは大きく異なることに注意してください。

FR と ES では、形容詞は名詞の後に来ます。「緑色の豆」は FR では「haricots verts」 (豆の緑色) になるため、変数をプラグインする場合、翻訳されたテンプレートには逆の順序で変数が含まれている必要があります。たとえば、引数の順序を変更できないため、 printf は機能しません。これが、上記のオプション 1 のように名前付き変数を使用し、フレーズを連結するのではなく、文全体と段落で翻訳されたテンプレートを使用する理由です。

データも翻訳する必要があるため、データに由来する「うんち」という言葉は、何らかの方法で翻訳する必要があります。英語と同様に、tooth/teeth、foot/feet などのように、言語が異なれば複数形も異なります。EN には、常に複数形のメガネとパンツもあります。他の言語にも同様に例外と奇妙な慣用句があります。英国では、IBM は見本市に「います」が、米国では、IBM は見本市に「います」。ロシア語には、人、動物、細長い物などに応じて複数形の規則がいくつかあります。他の国では、3 桁の区切り文字はスペース、ドット、またはアポストロフィであり、場合によっては 3 桁では機能しません。日本、一貫してインド。

平凡な言語サポートに満足してください。それはあまりにも多くの仕事です。

また、言語の変更と国の変更を混同しないでください。タヒチ、ハイチ、チャドは言うまでもなく、スイス、ベルギー、カナダにも FR スピーカーがいます。オーストリアは DE、アルバは NL、マカオは PT を話します。

于 2013-02-01T20:26:23.317 に答える
0

これは非常に単純で、非常に簡単です。

まず、クエリ文字列を決定するコードを追加する必要がありますlang。このために、answer here から取得したスニペットを使用します。

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

完全な HTML 回答については、この GISTを取得してください。

于 2012-03-07T07:33:54.263 に答える