具有客户端路由的PhoneGap / Cordova？

Question

我继承了运行Cordova 3.4的Cordova / PhoneGap应用程序。 我的第一个任务是实现客户端路由框架，以使其更容易在页面之间导航。 我选择Flatiron Director作为我的客户端路由器，但是当我实现它时，我开始从应用程序中获取奇怪的功能。

我的第一个路由器设置：

    var routing = {
        testHandler: function(){
            console.log('Route ran');
        },
        routes: function(){
            return {
                "/testhandler": testHandler
            }
        }
    };
    console.log('Routes added');

添加路由（至少基于控制台输出）。 当我尝试打入/ testhandler哈希值时，将window.location.hash设置为“ / testhandler”时，会收到“无法加载资源：file：/// testhandler”错误。 我注意到从未打印过“ Route ran”语句。

我的下一个尝试只是将hashchange事件与jQuery一起使用。

$(window).on('hashchange', function(){ console.log('Ran'); });

进行此尝试时，无论我将哈希值更改为什么，我都会看到“ Ran”输出，但仍然收到“无法加载资源：”错误。

这是PhoneGap / Cordova的问题吗？ 还是我们的实施？ 难道无法在Cordova中使用客户端路由？ 我究竟做错了什么？

Answer 1

我知道这并不能直接回答您的问题，但是您可以考虑制作自己的临时路由器。 这可以帮助您调试应用程序并找出问题所在。

例如：

   var router = (function (routes) {
        var onRouteChange = function () {
            // removes hash from the route
            var route = location.hash.slice(1);

            if (route in routes) {
                routes[route]();
            } else {
                console.log('Route not defined');
            }
        };

        window.addEventListener('hashchange', onRouteChange, false);

        return {
            addRoute: function (hashRoute, callback) {
                routes[hashRoute] = callback;
            },
            removeRoute: function (hashRoute) {
                delete routes[hashRoute];
            }
        };
    })({
            route1: function () { 
                console.log('Route 1');
                document.getElementById('view').innerHTML = '<div><h1>Route 1</h1><p>Para 1</p><p>Para 2</p></div>';
            }, 
            route2: function () { 
                console.log('Route 2'); 
                document.getElementById('view').innerHTML = '<div><h1>Route 1</h1><p>Para 1</p><p>Para 2</p></div>';
            }
        });