我正在与kendo一起使用i18next库,并且在我的应用程序的Kendo UI Web部分中按预期进行工作时没有任何问题,但是Mobile是另外一回事了。我以为我可以从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();
}
});
正如您在初始化代码中的注释中所看到的,我什至尝试将用于“头数”的列表项元素的文本绑定到通过init函数定位的数据模型文本字符串。但这并不会束缚,所以我放弃了,走了这条路。
最佳答案
我相信MVVM绑定和初始化实际上发生在视图init
和show
事件之前,因此您可以在其中任何一个事件中更改i18n东西。
实际上,您可以仅使用text
MVVM绑定程序来处理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
活页夹,他们需要更新以更改语言。