Маршрутизация в PathJS

Действие никогда не будет вызвано, потому что второй метод явно возвращает false.

Параметры маршрута

Что толку от системы маршрутизации, если она не позволяет использовать параметры? Если вы предоставите маршрут, содержащий :token, этот токен будет соответствовать чему угодно, при условии, что остальная часть маршрута также совпадает. Вы можете получить доступ к параметрам внутри ваших методов через объект this.params:

Path.map("/users/:name").to(function(){
    alert("Имя пользователя: " + this.params['name']);
});

Приведённый выше маршрут будет соответствовать любому из следующих hrefs:

#!/users/mike
#!/users/27

Необязательные / динамические маршруты

Вы можете определить маршрут с необязательными компонентами, заключив необязательные компоненты в круглые скобки. Внутри связанных методов любые параметры, которые не были предоставлены, вернутся как undefined.

Path.map("/users/:user_id?").to(function(){
    var user_id = this.params["user_id"] || "Установите здесь значение по умолчанию!";
});

Вышеупомянутый маршрут будет соответствовать обоим следующим:

#!/users    // Ваш параметр «user_id» будет неопределённым.
#!/users/7  // Ваш параметр «user_id» будет установлен на «7».

Все поддерживаемые правила маршрутов

/users                 // Статическое правило: Path.map('/users')
                        //
/users/:id             // Именованный параметр маршрута: Path.map('/users/:id') 
                        // --> this.params['id']
/users/:id(\\d+)       // Параметр должен быть цифрами: Path.map('/users/:id(\\d+)')
                        // --> this.params['id']
/users/:id?            // Параметр является необязательным: Path.map('/users/:id?') 
                        // --> this.params['id'] || 'undefined'
/users/:id/:action     // Path.map('/users/:id/:action')
                        // --> this.params['id'], this.params['action']
/users/(\\d+)          // Параметр маршрута — регулярное выражение: Path.map('/users/(\\d+)')
                        // --> this.params[0]
/users/(\\d+)/(\\w+)   // Path.map('/users/(\\d+)/(\\w+)')
                        // --> this.params[0], this.params[1]
/users/:id/(\\w+)      // Именованный параметр и параметр регулярного выражения используются вместе: Path.map('/users/:id/(\\w+)')
                        // --> this.params['id'], this.params[0]
/users/*               // Параметр-шаблон: Path.map('/users/*') 
                        // --> this.params[0] || 'undefined'
['/A', '/B', '/C']     // Мультимаршрут массива, может соответствовать любому заданному: Path.map(['/A', '/B', '/C'])
                        //
/^#\/comments\/(\d+)$/ // Маршрут регулярного выражения: Path.map(/^#\/comments\/(\d+)$/)
                        //

Другие:
/users_:id_:action                 // /users_2_edit
/get.:id..comments\\?p=:page(\\d+) // get.1202..comments?page=1
/... как определите сами...

Корневой маршрут

Если пользователь попадёт на вашу страницу без определённого маршрута, вы можете заставить его использовать корневой маршрут. Этот маршрут будет автоматически выбран при загрузке страницы:

Path.root("/home");

Метод спасения

Если маршрут каким-то образом оказался в вашей системе без правильной привязки к действию, вы можете указать «метод спасения», который будет вызван. Это позволит вам предоставить мгновенную обратную связь пользователю, если он нажмёт на неопределённый маршрут:

Path.rescue(function(){
    alert("404: Маршрут не найден");
});

Автоматическая диспетчеризация

Если пользователь попадает на вашу страницу с уже определённым маршрутом (например, нажимает на реферальную ссылку с href «www.yoursite.com/media#download»), PathJS автоматически найдёт и выполнит соответствующие методы маршрута.

Слушайте внимательно

Вы можете определять маршруты весь день, но если вы не скажете нам слушать их, ничего не произойдёт. Как только вы определили свои маршруты, запустите прослушиватель, просто набрав:

Path.listen({hashbang:true|false});

Вам следует всегда заключать ваши операторы Path.listen() в какую-либо форму метода «Document Ready». Это предотвращает ошибки, когда пользователи заходят на ваш сайт с заранее определённым маршрутом. Без знания того, что DOM полностью загружен, этот маршрут будет выполнен и может попытаться... Выполнение операций, которые пока недоступны

HTML5 PushState

Начиная с версии 0.7, PathJS официально поддерживает HTML5 History API через pushState. Прежде чем читать эту страницу, пожалуйста, ознакомьтесь со страницей вики «Начало работы». HTML5 History API поддерживается только некоторыми современными браузерами.

Отличия от хэштега

• Нет поддержки корневых маршрутов или маршрутов по умолчанию, так как они не имеют смысла, когда URI не содержит специальных символов. Просто передавайте полный маршрут.
• Вместо вызова метода Path.listen() теперь вызывается метод Path.history.listen().
• Для запуска события вызывайте метод Path.history.pushState, а не метод history.pushState.

Определение маршрутов

Маршруты определяются так же, как обычно, но вы опускаете хэштег в своём маршруте:

Path.map("/html5/rocks").to(function(){
    alert("Hello, World!");
});

Выполнение маршрутов

Как и в обычном HTML5 History API, чтобы добавить новый элемент истории в глобальный объект истории, необходимо вызвать метод pushState. Когда вы хотите использовать диспетчер маршрутов PathJS, вам нужно вызвать метод PathJS pushState.

Path.history.pushState(state, title, path);

Метод Path.history.pushState аналогичен стандартному методу history.pushState, но оборачивает вызовы к диспетчеру PathJS. Вы можете получить доступ к информации о состоянии истории так же, как если бы вы вручную установили состояние через history.pushState.

Внимательно слушайте и обеспечивайте постепенное ухудшение качества

Как упоминалось выше, теперь вам нужно вызывать метод Path.history.listen(), а не стандартный метод Path.listen(). В отличие от стандартного метода Path.listen(), этот метод принимает один логический параметр, который сообщает библиотеке PathJS, следует ли ей вернуться к поддержке хэштегов, если HTML5 не поддерживается.

Path.history.listen({'hashbang': true|false, 'fallback': true});  // Да, пожалуйста, вернитесь к хэштегам, если HTML5 не поддерживается.
Path.history.listen({'fallback': false}); // Нет, не возвращайтесь к хэштегам.
Path.history.listen();      // Это то же самое, что передать "false".

Этот новый метод выполняет несколько действий:

1. Проверяет, поддерживается ли HTML5, и соответственно устанавливает атрибут Path.history.supported.
2. Назначает внутренние методы атрибуту window.onpopstate для обеспечения возможностей «назад».
3. Проверяет, в зависимости от параметра fallback, вызывать ли слушателя хэштега и модифицировать ли определённые вами маршруты для поддержки хэштегов.

Примечания

• Метод Path.history.listen() будет оборачивать вызов к Path.listen(), если вы хотите обеспечить постепенное ухудшение качества до хэштегов. В этом случае вам не нужно вызывать его самостоятельно.
• PathJS предоставляет только оболочки для HTML5 History API и, таким образом, поддержка HTML5 доступна только в современных браузерах, поддерживающих HTML5 History API.

Запуск тестов

Чтобы запустить тесты, просто перейдите в папку ./tests и откройте HTML-файл в браузере. Обратите внимание, что HTML5 History API несовместим с протоколом file://, и для запуска тестов в папке tests/pushstate вам потребуется запустить их через веб-сервер, такой как nginx или Apache.

Следующие шаги

• Добавление поддержки обратных вызовов «после»
• Отказ от обратного вызова «enter» в пользу «before»

Запросы на вытягивание

Чтобы сделать запрос на вытягивание, выполните следующие действия:

• Укажите, какую конкретную версию PathJS вы использовали, когда столкнулись с проблемой / добавили функцию. Это можно узнать, выполнив команду Path.version в консоли отладчика.
• Убедитесь, что вы обновили набор тестов своими изменениями. Все тесты должны пройти.
• Не забудьте обновить минимизированную версию исходного кода.
• Не изменяйте атрибут Path.version. Я буду изменять его вручную при объединении запроса.

Отказ от ответственности

Этот код предоставляется без гарантии. Хотя я стремлюсь поддерживать обратную совместимость, код всё ещё находится в активной разработке. Поэтому некоторые изменения могут нарушить совместимость с более ранними версиями библиотеки. Пожалуйста, имейте это в виду при использовании.