Hi,
I'm facing a problem with the render of my internal views background, in a PhoneGap iOS application using Kendo. Here is a code demo of my problem:
In the "loginView", the view's background & control are correctly displayed.
But when you navigate to the view "otherView" (by entering a text in the textbox and clicking on the Submit button), the controls aren't visible...
And when I remove the <ul> & <li> tags from this second view, I lose the "iOS-like" background of the view naturally but the controls are visible, like in this second test:
Does anyone know the reason of this problem please?
UPDATE: when I remove all things around the view-model binding in the code, there is no more problem, like with this test code:
It seems that view-model binding with content controls (the "kendo.bind(...)" instructions) breaks the content render of
I'm facing a problem with the render of my internal views background, in a PhoneGap iOS application using Kendo. Here is a code demo of my problem:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Test</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<
meta
charset
=
"utf-8"
/>
<!-- ********** JS ********** -->
<
script
src
=
"js/cordova-2.0.0.js"
type
=
"text/javascript"
charset
=
"utf-8"
></
script
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<!-- ********** CSS ********** -->
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.mobile.all.min.css"
type
=
"text/css"
/>
</
head
>
<
body
>
<!-- ********** Login View ********** -->
<
div
data-role
=
"view"
id
=
"loginView"
data-title
=
"Login"
>
<
div
id
=
"form"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
label
for
=
"txtLogin"
>Login</
label
><
br
/>
<
input
id
=
"txtLogin"
name
=
"txtLogin"
maxlength
=
"20"
type
=
"text"
/>
</
li
>
<
li
>
<
a
data-role
=
"button"
id
=
"btnSubmit"
data-icon
=
"globe"
>Connect</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
<!-- ********** Another View ********** -->
<
div
data-role
=
"view"
id
=
"otherView"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
data-bind
=
"text: userName"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
span
data-bind
=
"text: userName"
></
span
>
</
li
>
<
li
>
<
span
>Displayed?</
span
>
</
li
>
</
ul
>
</
div
>
<
script
>
var app = new kendo.mobile.Application($(document).body, {
transition: 'slide'
});
var viewModel = kendo.observable({
userName: null
});
$("#btnSubmit").click(function() {
viewModel.userName = $("#txtLogin").val();
app.navigate("#otherView");
kendo.bind($("#otherView"), viewModel);
});
</
script
>
</
body
>
</
html
>
In the "loginView", the view's background & control are correctly displayed.
But when you navigate to the view "otherView" (by entering a text in the textbox and clicking on the Submit button), the controls aren't visible...
And when I remove the <ul> & <li> tags from this second view, I lose the "iOS-like" background of the view naturally but the controls are visible, like in this second test:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Test2</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<
meta
charset
=
"utf-8"
/>
<!-- ********** JS ********** -->
<
script
src
=
"js/cordova-2.0.0.js"
type
=
"text/javascript"
charset
=
"utf-8"
></
script
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<!-- ********** CSS ********** -->
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.mobile.all.min.css"
type
=
"text/css"
/>
</
head
>
<
body
>
<!-- ********** Login View ********** -->
<
div
data-role
=
"view"
id
=
"loginView"
data-title
=
"Login"
>
<
div
id
=
"form"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
label
for
=
"txtLogin"
>Login</
label
><
br
/>
<
input
id
=
"txtLogin"
name
=
"txtLogin"
maxlength
=
"20"
type
=
"text"
/>
</
li
>
<
li
>
<
a
data-role
=
"button"
id
=
"btnSubmit"
data-icon
=
"globe"
>Connect</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
<!-- ********** Another View ********** -->
<
div
data-role
=
"view"
id
=
"otherView"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
data-bind
=
"text: userName"
></
span
>
</
div
>
</
header
>
<
span
data-bind
=
"text: userName"
></
span
>
<
span
>Displayed?</
span
>
</
div
>
<
script
>
var app = new kendo.mobile.Application($(document).body, {
transition: 'slide'
});
var viewModel = kendo.observable({
userName: null
});
$("#btnSubmit").click(function() {
viewModel.userName = $("#txtLogin").val();
app.navigate("#otherView");
kendo.bind($("#otherView"), viewModel);
});
</
script
>
</
body
>
</
html
>
Does anyone know the reason of this problem please?
UPDATE: when I remove all things around the view-model binding in the code, there is no more problem, like with this test code:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Test</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<
meta
charset
=
"utf-8"
/>
<!-- ********** JS ********** -->
<
script
src
=
"js/cordova-2.0.0.js"
type
=
"text/javascript"
charset
=
"utf-8"
></
script
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<!-- ********** CSS ********** -->
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.mobile.all.min.css"
type
=
"text/css"
/>
</
head
>
<
body
>
<!-- ********** Another View ********** -->
<
div
data-role
=
"view"
id
=
"otherView"
data-title
=
"other"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
span
>Displayed?</
span
>
</
li
>
<
li
><
a
data-role
=
"button"
id
=
"btnSubmit2"
data-icon
=
"globe"
>Connect</
a
></
li
>
</
ul
>
</
div
>
<!-- ********** Login View ********** -->
<
div
data-role
=
"view"
id
=
"loginView"
data-title
=
"Login"
>
<
div
id
=
"form"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
data-type
=
"group"
>
<
li
>
<
label
for
=
"txtLogin"
>Login</
label
><
br
/>
<
input
id
=
"txtLogin"
name
=
"txtLogin"
maxlength
=
"20"
type
=
"text"
/>
</
li
>
<
li
>
<
a
data-role
=
"button"
id
=
"btnSubmit"
data-icon
=
"globe"
>Connect</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application($(document).body, {
transition: 'slide'
});
$("#btnSubmit").click(function() {
app.navigate("#otherView");
});
$("#btnSubmit2").click(function() {
app.navigate("#loginView");
});
</
script
>
</
body
>
</
html
>
It seems that view-model binding with content controls (the "kendo.bind(...)" instructions) breaks the content render of
data-role
=
"listview"
data-style
=
"inset"
blocks :(