0

这是我第一次尝试 phonegap helloworld，也是我第一次尝试做单页应用程序。总之，我有一个 index.html 有一个 id 为“子屏幕”的 div。我也有2个按钮。每个按钮都会将 Handlebar 模板加载到该 DIV 中。

问题： 当我启动应用程序时，按钮处理程序会立即按顺序触发（我收到屏幕 1 和屏幕 2 的警报消息）。当我点击按钮时，什么也没有发生，好像事件绑定没有正确完成。

也许我的 javascript 中有错误，但我不知道它是什么！

看我简单的 index.html：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/jquery-2.1.3.min.js"></script>
        <script src="js/handlebars-v3.0.1.js"></script>
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">

            <h1>PhoneGap test</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>


            <div id="subscreen">This is where we display the subscreens created using the handlebar templates below</div>
            <input class='screen1-key' value="Scr1" type="button"/>
            <input class='screen2-key' value="Scr2" type="button"/>

            <script id="scr1" type="text/x-handlebars-template">
                <div class='header'><h1>This is SCREEN 1</h1></div>
            </script>

            <script id="scr2" type="text/x-handlebars-template">
                <div class='header'><h1>This is SCREEN 2</h1></div>
            </script>
        </div>



        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

看我的简单 index.js，我尝试在 Handlebar 的初始化函数中编译我的模板。然后我尝试将 keyup 事件绑定到我的 2 个按钮，单击该按钮时会将模板 1 或 2 加载到 html 页面上的 div 中。

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();

        //Kev add handlebars stuff
        this.screen1 = Handlebars.compile($("#scr1").html());
        this.screen2 = Handlebars.compile($("#scr2").html());

    },

    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },

    onDeviceReady: function() {
        app.receivedEvent('deviceready');


        $('.screen1-key').on('keyup', app.renderScreen1());
        $('.screen2-key').on('keyup', app.renderScreen2());


    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },

    renderScreen1: function () {
        alert("render screen 1");
        $('#subscreen').html(this.screen1());
    },


    renderScreen2: function () {
        alert("render screen 2");
        data = {name: "Mr Wong"};
        $('#subscreen').html(app.screen2(data));
    }
};
4

1 回答 1

1

此代码正在触发功能

$('.screen1-key').on('keyup', app.renderScreen1());
$('.screen2-key').on('keyup', app.renderScreen2());

您必须将函数引用传递给事件处理程序，而不是执行函数本身。这些输入也是按钮，因此您必须改用单击事件处理程序。

$('.screen1-key').on('click', app.renderScreen1);
$('.screen2-key').on('click', app.renderScreen2);
于 2015-04-28T15:06:28.813 回答