jquery - 如何正确本地化kendo mobile中的字符串？

Question

我将 i18next 库与 kendo 一起使用，并且在我的应用程序的 Kendo UI Web 部分中按预期工作没有出现任何问题，但移动版则不同。我认为我可以从 init 函数调用我的 i18n 函数，并让它填充我的模板属性中的“data-i18n”，没有问题......但似乎在 View 之后您无法访问任何 View 元素完全构建/绑定(bind)...所以我尝试将 i18n 代码放入 ListView 的“DataBound”事件中，该事件确实有效，但每次渲染/刷新列表时似乎都会执行大量不必要的代码。

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

这是我的 View 本身模板:

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

这是我的 View 模型:

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

正如您在我的初始化代码中的注释中所看到的，我什至尝试将“人数”的列表项元素的文本绑定(bind)到通过 init 函数本地化的数据模型文本字符串。但这没有约束力，所以我放弃了，走了这条路。

Answer 1

我相信 MVVM 绑定(bind)和初始化实际上发生在 view init 和 show 事件之前，因此您可能会在这些事件中更改 i18n 内容。

<小时/>

实际上，您可以使用 text MVVM 绑定(bind)器来处理 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 绑定(bind)器需要更新以进行语言更改。