This is a migrated thread and some comments may be shown as answers.

Problem with internal views render

1 Answer 172 Views

Application

This is a migrated thread and some comments may be shown as answers.

Romain asked on 03 Aug 2012, 01:16 PM

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:

<!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" />

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

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

</head>

<body>

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

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

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

</head>

<body>

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

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

<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" />

</head>

<body>

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

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

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

1 Answer, 1 is accepted

answered on 09 Aug 2012, 02:47 AM

UHF Label is the main products among all UHF products with the most ecnomic, efficient and quick converter product for common application which had advantage in mass production.
It is a updating identification products of barcode label in logestic and supplier chain management.
OPRFID UHF Label can produce qualify the label UHF 860-960 MHz Gen2 Passive RFID Gen2 paper label compliant to the requirement of Wal-Mart Dock Door Portal of 3X3 meters in Conveyor Portal Speed at 600 feet/min , with size 4”x4”, 4”x2”,4”x6”, or any size at your requiement.

OPRFID Technologies., LTD
2-603 Room, Hong Feng Jia Yuan , 270# BeiMo Street
ChengXiang Putian City Fujian, P.R, China.
Tel: (0086)594 2790031
Fax: (0086)594 2790185
Mobile:(0086)13599454033
Email:oprfid.eva@oprfid.com

MSN:eva.oprfid@hotmail.com

skype:oprfid.eva

www.oprfid.com