0

我目前正在开发一个 PhoneGap 单页应用程序，但我遇到了一个奇怪的问题，即我的 href 链接没有触发以加载其他数据。当我将鼠标悬停在 chrome 中的链接上时，我可以看到它指向正确的位置，但是当我单击它时，什么也没有发生。

下面是index.html页面：

<html>
    <head>

        <script src="assets/css/source-sans-pro.js"></script>
        <link href="assets/css/styles.css" rel="stylesheet">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    </head>


    <body>

        <script id="home-tpl" type="text/x-handlebars-template">
            <a href="#login" class="header-button header-button-left"><button>Login</button></a>
            <div class='header'><h1>Testing App</h1></div>
            <p>This tool is designed to make your work easier</p>
            <p>This is some sample data.</p>

        </script>

        <script id="login-tpl" type="text/x-handlebars-template">
            <a href="#" class="header-back-button header-button-right"><button>Back</button></a>
            <div class='header'><h1>Sky SMS Tool</h1></div>

            <form id="loginForm">

                <div data-role="fieldcontain" class="ui-hide-label">
                    <input class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c" type="text" name="username" id="username" value="" placeholder="Username" />
                </div>

                <div data-role="fieldcontain" class="ui-hide-label">
                    <input class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c" type="password" name="password" id="password" value="" placeholder="Password" />
                </div>

                <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" data-mini="true" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-up-c" aria-disabled="false" data-disabled="false">

                    <span class="ui-btn-inner">

                        <span class="ui-btn-text">Submit</span>

                    </span>

                    <button type="submit" id="submitBtn" data-mini="true" class="ui-btn-hidden" data-disabled="false">Submit</button>

                </div>

            </form>

        </script>

        <script src="phonegap.js"></script>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script src="assets/lib/handlebars.js"></script>
        <script src="assets/js/storage/memory-store.js"></script>
        <script src="assets/js/HomeView.js"></script>
        <script src="assets/js/LoginView.js"></script>
        <script src="assets/js/TestHomeView.js"></script>
        <script src="assets/js/main.js"></script>

    </body>
</html>

这是我的main.js文件：

var app = {

    showAlert: function (message, title) {
        if (navigator.notification) {
            navigator.notification.alert(message, null, title, 'OK');
        } else {
            alert(title ? (title + ": " + message) : message);
        }
    },

    registerEvents: function() {
        $('body').on('mousedown', 'a', function(event) {
            $(event.target).addClass('tappable-active');
        });
        $('body').on('mouseup', 'a', function(event) {
            $(event.target).removeClass('tappable-active');
        });
        $(window).on('hashchange', $.proxy(this.route, this));
    },


    route: function() {
        //self.showAlert('Inside Routing', 'Debug!');
        var hash = window.location.hash;
        if (!hash) {
            $('body').html(new HomeView(this.store).render().el);
            return;
        }
        var match = hash.match(app.detailsURL);
        if (match) {

            $('body').html(new LoginView(this.store).render().el);

        }
    },

    initialize: function() {
        var self = this;
        this.detailsURL = /^#login/;
        this.registerEvents();
        this.store = new MemoryStore(function() {
            self.route();
        });
    }

};

app.initialize();

这是我的HomeView.js文件：

var HomeView = function(store) {

    this.initialize = function() {
        this.el = $('<div/>');
    };

    this.render = function() {
        this.el.html(HomeView.template());
        return this;
    };

    };

    this.initialize();

}

HomeView.template = Handlebars.compile($("#home-tpl").html());

我似乎无法找出为什么这不起作用我相信我已经正确实现了路由，但只是没有触发下面的链接：

<a href="#login" class="header-button header-button-left"><button>Login</button></a>

有人可以帮我解决这个问题，因为这是我第一次使用 PhoneGap 并且我很困惑：S

提前致谢

4

0 回答 0