如何正确本地化剑道手机中的字符串？

Posted 2023-05-07

【中文标题】如何正确本地化剑道手机中的字符串？

【英文标题】：How to properly localize strings in kendo mobile?

【发布时间】：2014-11-02 00:31:56

【问题描述】：

我在 kendo 旁边使用 i18next 库，并且在我的应用程序的 Kendo UI Web 部分中按预期工作没有问题，但移动端是另一回事。我认为我可以从 init 函数调用我的 i18n 函数，并让它毫无问题地填充我的模板属性中的“data-i18n”......但似乎在视图之后您无法访问任何视图元素完全构建/绑定...所以我尝试将 i18n 代码放入 ListView 的“DataBound”事件中，该事件确实有效，但这似乎每次呈现/刷新列表时都会执行很多不必要的代码。

关于如何更好地做到这一点的想法？因此，我什至还没有开始将布局本地化。

这是视图本身的模板：

<div id="dashboard-meeting" data-role="view" data-model="dashViewModel" data-bind="events:init:meetingListInit,show:meetingListShow" data-layout="drawer-layout" data-title="By Meeting"> <ul id="meeting-list" class="meetingList"></ul> <div class="no-data" style="display:none;">No Data</div> </div>

这是列表的行项目模板...

<script type="script/x-kendo-template" id="meeting-item">
    <a data-item-id="#=meetingID#" href="\#meeting-details?id=#=meetingID#" data-transition="slide:left">
    <h3 class="time">#= startTime #</h3>
    <h3 class="counts"><span class="hc" data-i18n="dashboard.headCountText"></span>: #=headCount# | Total: #=totalCount#</h3>
    <h2>#=meetingName#</h2>
    </a>
</script>

这是我的 viewModel：

    var dashViewModel = kendo.observable(
    headCountText : "Head Count",
    meetingListInit : function(e)
        var meetingList = $("#meeting-list").kendoMobileListView(
            dataSource: bymeetingData,
            pullToRefresh: true,
            template: $('#meeting-item').html(),
            dataBound: function(e)
                console.log("Data Bound");
                i18n.init(lang_options).done(function() 
                    //dashViewModel.set("headCountText", $.t("dashboard.headCount"));
                    //console.log("this list init'd" , $.t("dashboard.headCount"))
                    //$("#meeting-list").i18n();
                    $(".hc").text($.t("dashboard.headCount"));
                );
            
        ).data("kendoMobileListView");
    ,
    meetingListShow : function(e)
        //bymeetingData.read();
        $("#meeting-list").data("kendoMobileListView").refresh();
    
);

正如您在我的初始化代码中的 cmets 中看到的那样，我什至尝试将“人数”列表项元素的文本绑定到通过 init 函数本地化的数据模型文本字符串。但这不会绑定，所以我放弃了，走这条路。

【参考方案1】：

我相信 MVVM 绑定和初始化实际上发生在视图 init 和 show 事件之前，因此您可能会更改其中任何一个事件中的 i18n 内容。

---

您实际上可以只使用text MVVM binder 来处理 i18n，而不是使用像 i18next 这样的另一个库。

<span data-bind="text: strings.hello"></span>

我的 ViewModel 有一个“字符串”哈希（实际上在启动时作为 JSON 加载）

var english = 
    hello: "Hello"
;

var spanish = 
    hello: "Hola"
;

var viewModel = kendo.observable(
    strings: english
);

function enEspanolPorFavor() 
    viewModel.set("strings", spanish);

viewModel.set("strings", ...) 会通知 text 活页夹他们需要更新以更改语言。

【讨论】：

嘿@Co​​dingWithSpike，我实际上是在搜索你的网站，因为它充满了很棒的剑道东西。但是我很确定我已经尝试了您所建议的不同版本（尽管您的建议更简单）。由于某种原因，我无法将我的会议项目模板 data-bind="text:headCount" 与我的视图模型中的文本联系起来......关于为什么这不起作用的任何想法？？

我怀疑这是由于您使用.kendoMobileListView() 来初始化小部件，而不是使用data-role="listview" 以声明方式进行。我相信如果一个小部件没有绑定/初始化 MVVM，那么它的子元素也不会绑定 MVVM。

啊！我会走那条路，用那种声明性的方法尝试一些事情，然后报告。

由于某种原因，我仍然无法将该文本绑定到该项目模板元素。我不知道我做错了什么。你确定这甚至有效吗？我真的没有在剑道网站上看到任何演示。

我才想起我为什么不走 MVVM 声明式路线。如果不通过 javascript 函数初始化小部件，我无法使拉参数工作。 .kendoMobileListView()