Multi language support in Hot towel(Durandal framework)

Question

I'm in the process of creating a application using Hot Towel, which supports multiple language (eg. english, french)

I have the referred the following links

Translating Views

Durandal localization example

And my question is how can i render views of application based on user language. If user selects english, the complete application should display contents in english. How to achieve this

I have tried something like in the second link.

define({
    'root': {
        welcome: 'Welcome!',
        flickr: 'Flickr'
    },
    'fr-fr': true,
    'es-es': true,
});

Is this i have to create seperate views for languages or i have to create seperate App folder for contents

Suggest me some best practices.

Answer 1

you can do some thing like this . YOu can change the APP folder if you are need do lot of locale changes you can use the following method

@{

        string strAcceptLanguage;


        strAcceptLanguage = System.Configuration.ConfigurationManager.AppSettings["Locale"].ToString();

        if (strAcceptLanguage == "en-us")
    {
         @Scripts.Render("~/Scripts/vendor.js")
        <script type="text/javascript" src="~/Scripts/require.js" data-main="en-US/main"></script>

    }
        else if (strAcceptLanguage == "es-es")
    {
         @Scripts.Render("~/Scripts/vendor.js")
        <script type="text/javascript" src="~/Scripts/require.js" data-main="en-UK/main"></script>

    }

    else      if (strAcceptLanguage == "fr-fr")
    {
         @Scripts.Render("~/Scripts/vendor.js")
        <script type="text/javascript" src="~/Scripts/require.js" data-main="AUZ/main"></script>

    }



}

in the Index.cshtml you can use the above code and for the you need to have value in Webconfig file

<add key="Locale" value="en-us" />

and in the SPA page each time when the user try to change the locale by pressing button or any kind of option you have to trigger a event to call a AJAX post to assess a REST api to update the Given Locale Value in the webconfig file

changeLocale: function (val) {

            var name = JSON.stringify({
                locale: val
            });

            $.ajax({
                cache: false,
                url: "http://localhost:49589/api/Locale",
                type: "POST",
                dataType: "json",
                data: name,
                contentType: "application/json; charset=utf-8",
                processData: false,
                success: function (json) {


                    alert(json);
                    location.reload();

                },
                error: function (json) {
                    alert("error" + JSON.stringify(json));
                }
            });

you have to write the above code in the shell.js and the shell.html has the following code

 <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-primary" data-bind="click: changeLocale.bind($data, 'en-us')">English</button>
                <button type="button" class="btn btn-primary" data-bind="click: changeLocale.bind($data, 'es-es')">French</button>
                <button type="button" class="btn btn-primary" data-bind="click: changeLocale.bind($data, 'fr-fr')">Japanese</button>
            </div>

And the rest api like this

 [HttpPost]
        public string ChangeLocale(Locale l)
        {
            ConfigurationManager.AppSettings["Locale"] = l.locale;

            return "success";

        }

hope this will help

Answer 2

I don't recommend using separate views or separate folders if your project is a big one. You can just create a file of the labels and if you use lib like knockout just data-bind these labels once (text: xxxx). In addition you can use i18n to manage labels. With selected language just load the specific language file to your viewmodel.

EDIT1: I'd never encountered a complete sample nor tutorial. So how I do is to :

1. use tools like i18n to get the key-paired dictionary file for labels in html and in some javascript code like messages.
2. then manually I indexed these labels by augmenting knockout viewmodels for views and variables for modules. This is my last option in waiting for better solution. Hope this can help!