0

これは私の最初の phonegap helloworld の試みであり、シングル ページ アプリケーションを実行する最初の試みでもあります。要約すると、「サブスクリーン」という ID を持つ div を持つ index.html があります。ボタンも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 を見てください。初期化関数でテンプレートをハンドルバー コンパイルしようとしています。次に、キーアップ イベントを 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 に答える