以可擴展的方式切換JavaScript webapp中的i18n字段

Question

我正在編寫管理產品目錄的100％JavaScript webapp。 我正在使用Backbone &小鬍子等等。

每個產品都有一個名稱，需要翻譯。因此，對於每一個產品，我添加許多<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"> 

我顯示/隱藏取決於當前選定的語言依靠CSS類<input>元素，第一渲染而且當用戶更改語言：

 

var $html = ...; // Render Mustache template 

var cssClass = 'lang_' + currentLanguageId; 

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

這個方法是一個也許有點天真，但它很簡單，因爲每個輸入字段包含在其屬性的所有必要的信息，以保存數據。我正在監聽blur事件，以在用戶離開現場時保存數據。

問題是語言切換是slow當元素數量增長時。

我使用的是好技術嗎？我不認爲在語言改變時重新渲染產品是一個很好的解決方案。

Answer 1

難道你不能使用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類外股利。