私は phonegap と phonejs を使用して、小さな Android アプリを作成しています。コードは以下です。
問題は、アプリケーションが 1) ロードされるデータの量がかなり少ないにもかかわらず、ロードに 2 ～ 3 秒かかることです 2) クリックに反応せず、表示したいオーバーレイが表示されない 3) 一般的なイベント処理されていないようです。作成された div の数が画面スペースを超えても、スワイプで画面をスクロールすることもできません 4) Android の戻るボタンでさえ機能しません。
エミュレータとデバイスの両方でこれをテストしましたが、最初はエミュレータが正常に動作しているだけではないと思っていましたが、後でデバイスでそれが改善されていないことがわかりました。私がしたことは、私にはかなり単純に思えます。配列を持ち、垂直にリストされた div のリストと、その配列からの div のクリック イベントを生成します。私は何を間違っていますか？
<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>
transport.js は次のようになります。
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"
},
...
];