热毛巾(Durandal框架)中的多语言支持

时间:2013-09-23 09:44:40

标签: durandal hottowel multilingual i18next

我正在使用 Hot Towel 创建应用程序,它支持多语言(例如,英语,法语)

我推荐了以下链接

Translating Views

Durandal localization example

我的问题是我如何基于用户语言呈现应用程序的视图。如果用户选择英语,则完整的应用程序应以英语显示内容。如何实现这个

我尝试过类似第二个链接的内容。

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

我是否必须为语言创建单独的观点,或者我必须为内容创建单独的应用程序文件夹

建议我一些最佳做法。

2 个答案:

答案 0 :(得分:1)

如果您的项目很大,我建议不要使用单独的视图单独的文件夹。 您可以创建一个标签的文件,如果您使用像knockout这样的lib,只需将这些标签数据绑定一次(text:xxxx)。此外,您可以使用 i18n 来管理标签。 使用所选语言只需将特定语言文件加载到您的视图模型。

<强> EDIT1: 我从未遇到过完整的样本或教程。所以我该怎么做:

  1. 使用像i18n这样的工具来获取HTML中标签的密钥配对字典文件以及一些javascript代码,例如消息。
  2. 然后手动我通过为模块的视图和变量扩充敲除视图模型来索引这些标签。 这是我等待更好解决方案的最后选择。希望这可以提供帮助!

答案 1 :(得分:0)

你可以做这样的事。如果您需要进行大量区域设置更改,可以使用以下方法更改APP文件夹

@{

        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>

    }



}

在Index.cshtml中,您可以使用上面的代码,并且您需要在Webconfig文件中拥有值

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

并且在SPA页面中每当用户尝试通过按下按钮或任何类型的选项来更改区域设置时,您必须触发事件来调用AJAX帖子以评估REST API以更新给定的区域设置值webconfig文件

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));
                }
            });

您必须在 shell.js 中编写上述代码, shell.html 包含以下代码

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

其余的api就像这样

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

            return "success";

        }

希望这会有所帮助

enter image description here

enter image description here

enter image description here