0

我正在编写一个 100% JavaScript webapp 来管理产品目录。除其他外，我正在使用 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 类的语言、第一次渲染以及用户更改语言时显示/隐藏元素：

变量 $html = ...; // 渲染 Mustache 模板

var cssClass = 'lang_' + currentLanguageId;

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

这种方法可能有点幼稚，但它很简单，因为每个输入字段的属性中都包含保存数据所需的所有信息。blur当用户离开现场时，我正在监听事件以保存数据。

问题是当元素数量增加时语言切换很慢。

我在使用好的技术吗？我不认为在语言更改时重新渲染产品项目是一个好的解决方案。

4

1 回答 1

0

您不能使用 css 而不是 javascript 来切换显示/隐藏吗？

例如：

.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 回答