Translating views with HotTowel (Durandal framework) + VS2012

徘徊边缘 提交于 2019-12-20 14:39:57

问题


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.


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



来源:https://stackoverflow.com/questions/15568939/translating-views-with-hottowel-durandal-framework-vs2012

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!