Translating views with HotTowel (Durandal framework) + VS2012

Question

I develop an ASP.NET MVC solution with Durandal and Breeze. I need to translate frontend to french and dutch. How to proceed with Durandal/knockout?

In a classic ASP.NET MVC solution we have the opportunity to have the views rendered server side (thanks to razor).

Thanks for your help.

Cacology

I recommend that you take a look at require's support for localization: requirejs.org/docs/api.html#i18n – Chiachiack

Answer 1

To expand on Rob's answer of trying the i18n.js plugin for require.js, here's the steps I followed (I'm working off the Durandal starter template in Visual Studio).

1. Download the i18n.js plugin and put it in the App folder.

2. Create an App/nls folder, which is where you will put the require.js resource bundles, e.g. App/nls/welcomeBundle.js.

   define({
       "root": {
           "displayName": "Welcome to the Durandal Starter Project!"
       },
       "fr-fr": true
   });
   

3. You'll see I added a line to tell require.js that there's a French version available. This will be created in App/nls/fr-fr/welcomeBundle.js, which I kinda did below (changed the to le :D)

   define({
       "displayName": "Welcome to le Durandal Starter Project!"
   });
   

4. require.js needs to be configured initially with the locale (can't be done dynamically). So in the main.js file, I declare the below getLocale() function, which I use to configure the locale for require.js:

   function getLocale() {
       var locale = 'en-us';
       if (localStorage) {
           var storedLocale = localStorage.getItem('locale');
           locale = storedLocale || locale;
       }
       return locale;
   }
   
   requirejs.config({
       paths: {
           'text': 'durandal/amd/text'
       },
       locale: getLocale()
   });
   

5. In the welcome.js module I then load the bundle and use it for the displayName property:

   define(function(require) {
       var bundle = require('i18n!nls/welcomeBundle');
       return {
           displayName: bundle.displayName,
           ...
       }
   });
   

6. I then set the locale to French and reload the page via JavaScript:

    localStorage.setItem('locale', 'fr-fr');
    location.reload();
   

Hope that helps :)

Edit: 2013-04-04: I updated the above to initialize the locale in the main.js file and not in the shell.js module, as for some reason the locale wasn't being used correctly when loading the bundle in the shell module. Figure that it should be configured as soon as possible anyway.

Lucilucia