Question

我目前正在开发一个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

提前致谢

PhoneGap单页链接没有解雇？

0 个答案: