0

我正在使用 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"
},
    ...
];
4

0 回答 0