Toggling i18n fields in a JavaScript webapp in a scalable way

Question

I'm writing a 100% JavaScript webapp that manages a catalog of products. I'm using Backbone & Mustache, among other things.

Each product has a name, which needs to be translated. So for each product, I add as many <input> elements as there are languages to translate, something like this :

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

I show/hide <input> elements depending on the currently selected language relying on CSS classes, on the first rendering and also when the user changes the language :

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

var cssClass = 'lang_' + currentLanguageId;

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

This method is a maybe a little bit naïve, but it is simple, because each input field contains all the necessary information in its attributes to save the data. I'm listening the blur event to save data when the user leaves the field.

The problem is that the language switch is slow when the number of elements grows.

Am I using the good technique ? I don't think re-rendering the product items when the language changes would be a good solution.

Answer 1

Can't you use css instead of javascript to toggle the show/hide?

E.g.:

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

Then just toggle the fr class of the outer div.