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 :(1 Answer, 1 is accepted
0
Eva
Top achievements
Rank 1
Rank 1
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
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