Hi,
I've got an application that calls application.navigate.
When you move from view1 to view2, the tabstrip updates, however going back the other way causes the tabstrip to go out of sync.
Here's some sample code to illustrate the behaviour:
Kendo UI Mobile build: 926
Browser: Chrome 30
Any idea why this happens?
Thanks.
I've got an application that calls application.navigate.
When you move from view1 to view2, the tabstrip updates, however going back the other way causes the tabstrip to go out of sync.
Here's some sample code to illustrate the behaviour:
<!DOCTYPE html>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
name
=
"viewport"
content
=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=medium-dpi"
/>
<
link
rel
=
"stylesheet"
href
=
"styles/926/kendo.mobile.all.min.css"
/>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo/926/kendo.mobile.min.js"
></
script
>
</
head
>
<
body
id
=
"dmbody"
>
<
script
type
=
"text/javascript"
>
var application = new kendo.mobile.Application($(document).body,
{
transition: "slide",
skin: "flat"
});
function navToView2() {
//performs all sorts of logic, but boils down to calling application.navigate to some URL
application.navigate('#view2');
}
function navToView1() {
//performs all sorts of logic, but boils down to calling application.navigate to some URL
application.navigate('#view1');
}
</
script
>
<!-- initial view -->
<
div
data-role
=
"view"
data-layout
=
"app"
data-title
=
"View 1"
id
=
"view1"
>
<
p
>
<
a
data-role
=
"button"
data-click
=
"navToView2"
>View 2</
a
>
</
p
>
</
div
>
<
div
data-role
=
"view"
data-layout
=
"app"
data-title
=
"View 2"
id
=
"view2"
>
<
p
>
<
a
data-role
=
"button"
data-click
=
"navToView1"
>View 1</
a
>
</
p
>
</
div
>
<!-- application layout template -->
<
div
data-role
=
"layout"
data-id
=
"app"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#view1"
>View 1</
a
>
<
a
href
=
"#view2"
>View 2</
a
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
Kendo UI Mobile build: 926
Browser: Chrome 30
Any idea why this happens?
Thanks.