NavBar Title Translation

[giord]

I have a phonegap 3 application where I use kendo mobile.

For internationalization I use this:
https://github.com/plang/phonegap-l10n
It's pretty simple. I can add a class an the translation works.

My views:

<div data-role="view" id="tab-catalog" data-title="Catalog" data-layout="mobile-tabstrip">
....
</div>

<div data-role="view" id="tab-account" data-title="Account" data-layout="mobile-tabstrip">
 ....
</div>

My Layout:

<div data-role="layout" data-id="mobile-tabstrip">
       <header data-role="header">
           <div id="navbar" data-role="navbar">
               <a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-button" data-align="left"></a>
               <span data-role="view-title"></span>
               <a id="scan" data-align="right" data-icon="camera" data-role="button"></a>
           </div>
       </header>
   </div>

Works fine.. but I don't know how to translate the data-title attribute.
I know I can set the title with
$("#navbar").data("kendoMobileNavBar").title("foo");
I also could read the title of my view with kendo.view().title and make the translation, something like this:

$("#navbar").data("kendoMobileNavBar").title(Localization.for(kendo.view().title));

After I start the app is the title is translated, but if I change the view and come back the title is "Catalog" again.

How could I accomplish anything like this?

[Petyo]

Hi Bruno,

If I understand you correctly, the easiest way to handle that would be to update the view title with its translated value in the view init event handler. Please check this sample for what I mean.

Regards,
Petyo
Telerik

[giord]

This works exactly like I wanted, thank you!

On one specific view I have to set the title differently evertime the view is loaded.
I tried it with the data-show attribute:

<div data-role="view" id="tab-infos" data-title="foo" data-layout="mobile-promotion" data-show="onShow">
function onShow(e) {
            e.view.options.title = "bar";
}

the function onShow gets executed, but the title doesn't change?

EDIT:
onShow fires everytime, but the title changes only after the second time? If I set data-init and data-show it works, but why doesn't data-show work the first time?

[Petyo]

Hello Bruno,

This sounds strange; I tried changing data-init to data show in this sample – it seems to be working as expected. Maybe there is something else that needs to be done in order to reproduce the problem?

Regards,
Petyo
Telerik

[Anthony]

Hello,

I have the same issue.

Why does data-show not work the first time ?

it works from the second time onwards.

cheers
Tony

[Atanas Korchev]

Hello,

We can't reproduce this problem in this jsbin demo: http://jsbin.com/oVAzUWU/1/edit

The show event is fired the very first time. Could you please update this demo so it starts to fail like in your real application?

Regards,
Atanas Korchev
Telerik

[giord]

I could reproduce the error:
http://jsbin.com/asUPAMO/2/

First time I click on the button "Detail" the title shows "detail", after I click on the Back button and one more time on de detail button it shows "OnShow Title".

[Atanas Korchev]

Hello,

If you update the code with an alert statement you would see that it is immediately executed: http://jsbin.com/asUPAMO/4


Changing options.title won't work because the title is already rendered by the time the show event is triggered.

Regards,
Atanas Korchev
Telerik

[giord]

Hmm ok.. I have a list of entries, everyone links to the detail page. I need to show a different title everytime I click on a different entry.
How can I accomplish something like this?

[Alexander Valchev]

Hi Giord,

In order to change the NavBar Title's text at runtime you should use the title method. Please have in mind that layout elements are copied into the Views that use them, so it is not recommended use IDs in the layout. Please remove the id="navbar" attribute and reference the NavBar through the View properties (like shown in the code sample from the documentation).

Regards,
Alexander Valchev
Telerik

[giord]

Works like a charm, thank you!

I removed the id's, which I never actually used.