How to properly localize strings in kendo mobile?

Question

I'm using the i18next library alongside of kendo and have had no issues getting things working as expected in the Kendo UI Web portion of my app, but the Mobile is a different story. I thought that I could call my i18n function from the init function and have it populate the "data-i18n" in my templates' attributes with no problem... but it seems like you cannot access any of the view elements until after the view is completely built/bound... So I tried putting the i18n code in a "DataBound" event for the ListView which does work, but that seems like a lot of unnecessary code execution every time the list is rendered/refreshed.

Thoughts on how to better do this? I haven't even started down the path of localizing the Layouts because of this.

Here's my template for the view Itself:

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

This is the row item template for the list...

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

And here is my 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();
    }
});

As you can see in my comments in my init code I even tried to bind the text of the list item elements for "head count" to a data model text string that is localized via the init function. But that wouldn't bind, so I gave up on that and went this route.

Answer 1

I believe the MVVM binding and initialization actually happens before the view init and show events, so you could potentially change the i18n stuff in either of those events.

---

You could actually just use the text MVVM binder to handle i18n instead of using another library like i18next.

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

and my ViewModel has a "strings" hash (that is actually loaded at startup as JSON)

var english = {
    hello: "Hello"
};

var spanish = {
    hello: "Hola"
};

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

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

The viewModel.set("strings", ...) would notify the text binders that they need to update for a language change.