PhoneGap/Cordova с маршрутизации на стороне клиента?

Question

Я унаследовал приложение Cordova/PhoneGap, использующее Cordova 3.4. Моя первая задача состояла в том, чтобы реализовать инфраструктуру маршрутизации на стороне клиента, чтобы упростить навигацию между страницами. Я выбрал Flatiron Director в качестве моего клиентского маршрутизатора, но когда я начал его реализовывать, я начал получать необычную функциональность из приложения.

Моя первая настройка роутера:

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

Добавлены маршруты (по крайней мере, на основе вывода консоли). Когда я пытаюсь попасть в хэш-файл/testhandler, я получаю сообщение «Ошибка при загрузке ресурса: файл: /// testhandler», когда я устанавливаю window.location.hash в «/ testhandler». Я заметил, что заявление «Route ran» не было напечатано.

Моя следующая попытка состояла в том, чтобы использовать событие hashchange с jQuery.

$(window).on('hashchange', function(){ console.log('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>'; 
      } 
     });