Kendo UI - 本地化应用程序

Posted 2023-05-07

【中文标题】Kendo UI - 本地化应用程序

【英文标题】：Kendo UI - Localize application

【发布时间】：2014-07-22 14:46:06

【问题描述】：

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

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

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

但是，如果我有一个列表视图并且想要本地化它的标题：

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

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

【参考方案1】：

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

希望这会有所帮助。

【参考方案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));
);

希望这对遇到类似问题的人有所帮助！