I'm using phonegap and phonejs to write a small android app. Code is below.
The problem is that the application 1) takes 2-3 seconds to load even though the amount of data loaded is fairly small 2) it doesn't react to clicks, the overlay that I want to show does never appear 3) events in general don't seem to be processed. I also cannot scroll the screen through swiping even though the number of created divs exceeds the screen space 4) Even the android back button doesn't work.
I've tested this both on emulator and device while I first thought the emulator wasn't just working fine I saw later the on the device it isn't any better. What I did seems to be fairly simple to me. Have an array and generate a list of divs listed vertically and a click-event on the divs out of that array. What am I doing wrong?
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
content="user-scalable=no, width=320, initial-scale=1" />
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" />-->
<title>My First Application</title>
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />
<link rel="stylesheet" type="text/css"
href="css/dx.android.holo-dark.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/knockout-3.0.0.js"></script>
<script type="text/javascript" src="js/globalize.min.js"></script>
<script type="text/javascript" src="js/dx.phonejs.debug.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html" />
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script> -->
<script type="text/javascript" src="js/transports.js"></script>
<script type="text/javascript">
window.AppNamespace = {};
$(function() {
DevExpress.framework.html.layoutControllers.push({
navigationType : "myNavigation",
controller : new DevExpress.framework.html.DefaultLayoutController(
{
layoutTemplateName : "myLayout"
})
});
AppNamespace.app = new DevExpress.framework.html.HtmlApplication({
namespace : AppNamespace,
navigationType : "myNavigation"
});
AppNamespace.app.router.register(":view", {
view : "home"
});
AppNamespace.app.navigate();
});
transports.sort(function(a, b) {
return a.date > b.date;
});
// modify transport, add class
for ( var jj = 0; jj < transports.length; jj++) {
transports[jj].textbinding = transports[jj].date + " "
+ transports[jj].bookingnr;
if (transports[jj].from == "Berlin") {
transports[jj].css = "flight-item-b " + transports[jj].bookingnr;
} else
transports[jj].css = "flight-item-f " + transports[jj].bookingnr;
}
AppNamespace.home = function() {
var viewModel = {
detailsVisible : ko.observable(false),
buttonVisible : ko.observable(false),
popupTitle : 'Kaiis Pupspup',
_transports : ko.observable(transports),
selItem : ko.observable(transports[0]),
}
var me = viewModel;
viewModel.onclick = function(selected) {
//me.selItem(selected);
me.detailsVisible(true);
//alert (selected.arrival);
};
viewModel.hideDetails = function() {
me.detailsVisible(false);
}
return viewModel;
};
</script>
</head>
<body>
<div data-options="dxLayout : { name: 'myLayout' } ">
<div
data-options="dxToolbar: { items: [ { text: 'TransPonder', align: 'center' } ] }"></div>
<div
data-options="dxContentPlaceholder : { name: 'content', transition: 'slide' } "></div>
</div>
<div data-options="dxView: {name: 'home'}">
<div data-options="dxContent : { targetPlaceholder: 'content' } ">
<div data-bind="foreach: _transports()">
<div data-bind="css: $data.css, click: $parent.onclick">
<div data-bind="text: $data.textbinding"></div>
</div>
</div>
</div>
<div data-bind="dxOverlay:{visible: detailsVisible }">
<p>The text that should be shown in the overlaying window.</p>
<div data-bind="dxButton: { text: 'Close', clickAction: hideDetails }"></div>
</div>
</div>
</body>
</html>
and here's how the transport.js looks like:
var transports = [
{
bookingnr: "4HPXTJ",
from: "Berlin",
to: "Frankfurt",
date: "2013-01-23",
departure: "17:45",
arrival: "19:00",
carrier: "Lufthansa"
},
{
bookingnr: "4HPXTJ",
from: "Frankfurt",
to: "Berlin",
date: "2013-11-24",
departure: "14:15",
arrival: "15:30",
carrier: "Lufthansa"
},
...
];