Question

我使用phonegap和phonejs编写一个小型Android应用程序。代码如下。

问题在于应用程序 1）即使加载的数据量相当小，也需要2-3秒才能加载 2）它不会对点击做出反应，我想要显示的叠加层永远不会出现 3）事件似乎一般都没有得到处理。即使创建的div的数量超过屏幕空间，我也无法通过滑动滚动屏幕 4）即使是android后退按钮也无法正常工作。

我已经在模拟器和设备上对此进行了测试，而我第一次认为模拟器不能正常工作我稍后会看到设备上的设备并不是更好。我所做的似乎对我来说相当简单。有一个数组并生成一个垂直列出的div列表，并在该数组的div上生成一个click事件。我究竟做错了什么？

<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"
},
    ...
];

使用PhoneJS和PhoneGap的简单Android应用程序只是冻结

0 个答案: