0

製品のカタログを管理する 100% JavaScript Web アプリケーションを作成しています。Backbone & Mustache などを使用しています。

各製品には名前があり、翻訳する必要があります。そのため、製品ごとに、<input>翻訳する言語と同じ数の要素を次のように追加します。

<input type="text" name="name_fr" value="Bonjour" class="i18n lang_fr">
<input type="text" name="name_en" value="Hello" class="i18n lang_en">
<input type="text" name="name_es" value="Hola" class="i18n lang_es">

<input>CSSクラスに依存する現在選択されている言語に応じて、最初のレンダリング時、およびユーザーが言語を変更したときに、要素を表示/非表示にします:

var $html = ...; // 口ひげのテンプレートをレンダリングします

var cssClass = 'lang_' + currentLanguageId;

$html.find('.i18n.' + cssClass).show();
$html.find('.i18n:not(.' + cssClass + ')').hide();

この方法は少しナイーブかもしれませんが、データを保存するために必要なすべての情報が各入力フィールドの属性に含まれているため、単純です。blurユーザーがフィールドを離れたときにデータを保存するイベントをリッスンしています。

問題は、要素の数が増えると言語の切り替えが遅くなることです。

私は良いテクニックを使っていますか？言語が変更されたときに製品アイテムを再レンダリングすることは良い解決策ではないと思います。

4

1 に答える 1

0

javascriptの代わりにcssを使用して表示/非表示を切り替えることはできませんか？

例えば：

.lang_fr,.lang_en,.lang_es {display:none}
.fr .lang_fr {display:inline}
.en .lang_en {display:inline}
.es .lang_es {display:inline}

...

<div class="fr">
  <input type="text" name="name_fr" value="Bonjour" class="i18n lang_fr">
  <input type="text" name="name_en" value="Hello" class="i18n lang_en">
  <input type="text" name="name_es" value="Hola" class="i18n lang_es">
</div>

fr次に、外部divのクラスを切り替えます。

于 2012-11-11T13:20:10.787 に答える