Question

如何本地化使用Kendo UI等框架的纯前端应用程序？

我的意思是，可以这样做：

$(document).ready(function(){
  $("#myText").html(<grab text based on language>);
});

但是，如果我有一个listview并想要本地化它的标题：

<div id="tabstrip-expenseaccounts" data-role="view">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li id="expenseaccounts-listview-title">
           abcde 
            <ul>
              ...
            </ul>
        </li>
    </ul>
</div>

变为：

...
<li id="expenseaccounts-listview-title" class="km-group-container">
  <div class="km-group-title">
    <div class="km-text">abcde</div>
  </div>
  <ul class="km-list">      
    ...
  </ul>
</li>
...

我需要检查生成的代码并执行以下操作：

$(document).ready(function(){
  $("#expenseaccounts-listview-title.km-group-container div.km-group-title div.km-text").html(<grab text based on language>);
});

它工作正常，但这对我来说似乎不是一个干净的解决方案。有什么建议？谢谢！

Answer 1

对于KendoUI，GitHub here上提供了一些语言包。 This other stakoverflow问题应该会给你一个开端。有了这个，你所要做的就是使用正确的语言包，你就可以了。如果您的特定情况没有语言包，您可以随时自行滚动。

希望这有帮助。

Answer 2

虽然我还没有找到适合Kendo UI的解决方案，但我采用的方法是本地化我的移动应用程序。请注意，我不是在谈论本地化小部件，我指的是本地化应用程序的每个静态方面：输入占位符，按钮上的文本，标题等。

我的移动应用程序只有一个文件index.html，每当我想导航到另一个页面时，我只需移动到另一个视图。由于在同一个文件中有多个视图是一种混乱，我为每个视图制作了一个html文件，并动态地将它们加载到正文中（index.html有一个空体）。在为每个视图附加使用$.get检索的html之前（此时，它是一个巨大的字符串），我将根据当前语言（从localstorage / cookie或从默认值）。

示例：

在我的本地化库中：

_localization.localizeText = function(text, arr){
        arr.forEach(function(item){
            text = text.replace(item.name, getLang() == 1 ? item.replacement.en : item.replacement.fr);
        });
        return text;
    }

在我的login.html文件中：

<button>$$login-button$$</button>

然后在一些javascript文件中，该文件包含在初始化应用程序的脚本之前：

var replacements = [];
replacements.push({
    name: "$$login-button$$",
    replacement: {
        fr: "Connecter",
        en: "Log In"
    }
});

然后当我将我的文件加载到正文中时：

$.when($.get("login.html"))
    .done(function(p1){
        var body = $("body");
        body.append(localization.localizeText(p1[0], app.replacements));
});

希望这可以帮助任何有类似问题的人！

Kendo UI - 本地化应用程序

2 个答案: