Маршрутизатор в костяке действует как функция маршрутизации, управляя направлением URL и вступает в силу при использовании тега # в URL.
Определение маршрутизатора требует хотя бы одного маршрутизатора и функции для картирования определенного URL, и мы должны помнить, что в основе любой персонаж после # тег будет получен и интерпретирован маршрутизатором.
Давайте определим маршрутизатор:
<script> var avestuter = backbone.router.extend ({routes: {"*action": "defaultroute" // match http://example.com/#anything-here}}); // создание маршрутизатора var app_router = new Apester; app_router.on ('route: defaultroute', function (actions) {alert (actions);}) // Откройте историю Backbone Backbone.history.start (); </script>Теперь мы определили маршрутизатор, но в настоящее время маршрутизатор не соответствует конкретному URL. Далее мы начнем подробно объяснять, как работает маршрутизатор.
Динамическая маршрутизация
Backbone позволяет вам определить маршрутизатор с определенными параметрами. Например, вы можете получить сообщение с помощью конкретного идентификатора, например, URL: «http://example.com/#/posts/12». Как только этот маршрутизатор активирован, вы можете получить сообщение с идентификатором 12. Далее давайте определим этот маршрутизатор:
<script> var avestuter = backbone.router.extend ({routes: {"posts/: id": "getPost", "*actions": "defaultroute" // Backbone будет соответствовать маршрутам в соответствии с заказом}}); // создание маршрутизатора var app_router = new Apester; app_router.on ('route: getPost', function (id) {// Обратите внимание, что параметры передаются здесь Alert ("get post number" + id);}); app_router.on ('route: defaultroute', function (actions) {alert (actions);}); // Откройте историю Backbone Backbone.history.start (); </script>Соответствие правила
Backbone использует две формы переменных, чтобы установить правила соответствия для маршрутизатора. Первое - это:, может соответствовать любым параметрам между ударами в URL, а другой - *, который используется для сопоставления всех деталей за чертами. Обратите внимание, что, поскольку вторая форма имеет большую двусмысленность, чем первая, она имеет самый низкий приоритет соответствующего.
Результат любой формы совпадения передается в соответствующую функцию в качестве параметра. Первое правило может вернуть один или несколько параметров, а второе правило возвращает весь результат совпадения в качестве параметра.
Далее, давайте используем примеры, чтобы проиллюстрировать:
Маршруты: {"posts/: id": "getPost", // <a href = "http://example.com/#/posts/121"> Пример </a> "Скачать/*PATH": "DownloadFile", // <a href = "http://example.com/download/User/image/hey.gif. "LoadView", // <a href = "http://example.com/#/dashboard/graph"> route/oction route/oction view </a>}, app_router.on ('route: getPost', function (id) {alert (id); // после совпадения, прошел параметр 12}; ALERT (PATH);Вы часто можете услышать слово «маршрутизатор», но оно часто относится к сетевому устройству, которое является навигацией и центром для сетевых соединений, передачи данных. Функция «маршрутизатора» в магистрали похожа на нее. Как вы можете видеть из приведенного выше примера, он может перемещаться по различным якорям URL -адресу к соответствующему методу действия.
(Этот механизм также предоставляется во многих веб-фреймворках на стороне сервера, но Backbone.Router больше фокусируется на навигации с передовыми одностраничными приложениями.)
Навигация по маршрутизации Backbone выполняется двумя классами Backbone.Router и BACKBONE.History:
Как правило, мы не создаем экземпляра истории напрямую, потому что, когда мы впервые создаем экземпляр маршрутизатора, мы автоматически создадим объект истории Singleton, к которому вы можете получить доступ через Backbone.history.
Чтобы использовать функцию маршрутизации, нам сначала необходимо определить класс маршрутизатора, чтобы объявить правила URL и действия, которые необходимо прослушать. В примере только сейчас мы определяем список URL -адресов, который будет прослушан через атрибут «Маршруты» при определении, где ключ представляет правила URL -адреса, а значение представляет метод действия, выполняемый при URL в этом правиле.
Хэш Правила
Правила URL представляют фрагмент хэша (точка привязки) в текущем URL. В дополнение к возможности указать общие строки в правилах, нам также необходимо обратить внимание на два специальных динамических правила:
Строка, разделенная / (SLASH) в правиле, будет преобразована в выражение ([^//]+) в классе маршрутизатора, представляя несколько символов, начиная с / (SLASH). If: (Colon) установлен в этом правиле, это означает, что эта строка в URL будет передаваться в действие в качестве параметра.
Например, мы устанавливаем тему правила/: id. Когда точка привязки будет #тема/1023, 1023 будет передано в действие в качестве идентификатора параметра. Имя параметра (: id) в правиле, как правило, будет таким же, как и имя формального параметра метода действия. Хотя маршрутизатор не имеет таких ограничений, легче понять, используя одно и то же имя параметра.
* (звездочка) в правиле преобразуется в выражение (.*?) Внутри маршрутизатора, представляя нулевое или более произвольное символы. По сравнению с правилом: (толстой кишки), * (Asterisk) не имеет ограничения на разделение / (slash), как правило * ошибки, которое мы определили в примере выше.
Правило * (Asterisk) в маршрутизаторе использует не-сильную шаблон после преобразования в регулярное выражение, поэтому вы можете использовать правило комбинации, подобное: * type/: id, который может соответствовать #hot/1023, и будет проходить горячее и 1023 в качестве параметров метода действия.
Вышеуказанное представляет, как определены правила. Эти правила будут соответствовать имени метода действия, которое должно быть в объекте маршрутизатора.
После определения класса маршрутизатора нам необходимо создать создание объекта маршрутизатора и вызовать метод start () backbone.history, который начнет слушать URL. Внутри объекта истории событие Onhashchange будет использоваться для прослушивания изменений в URL в хэш (точка якоря). Для браузеров, которые не поддерживают событие Onhashchange (например, IE6), история будет слушать сердцебиение SetInterval.
Правила pushstate
Backbone.history также поддерживает URL -адреса Pushstate. PushState - это новая функция, предоставленная HTML5. Он может управлять URL -адресом текущего браузера (а не просто изменять точку привязки) и не приведет к обновлению страницы, что делает одно страницу приложения более похожим на полный процесс.
Чтобы использовать функцию pushstate, вам нужно сначала понять некоторые методы и события, предоставленные HTML5 для этой функции (эти методы определены в окне.
1.pushstate (): Этот метод может добавить новую историю сущности в историю браузера к указанному URL.
2. Replacestate (): этот метод может заменить текущую историю сущности на указанный URL
Вызов PushState () и Methods () и Replacestate () просто для замены URL -адреса текущей страницы, и он не будет перейти к этому адресу URL (при использовании обратной или вперед кнопки, он не будет прыгать на URL). Мы можем выслушать изменения URL -адреса, вызванные этими двумя методами через событие OnPopstate.
Методы, связанные с маршрутизацией
1.route () Метод
После настройки правил маршрутизации, если требуется динамическая корректировка, вы можете вызвать метод router.route () для динамического добавления правил маршрутизации и методов действия, например:
router.route ('theme/: pageno/: pagesize', 'page', function (pageno, pagesize) {// todo}); Когда мы называем метод route (), данное правило может быть не только строкой, но и регулярным выражением: router.route (/^topic /(.*?2.navigate () Метод
В предыдущем примере правила URL запускаются нашим ручным вводом. В реальных приложениях иногда может потребоваться вручную прыгать и навигация, и вы можете назвать это
Метод router.navigate () используется для элемента управления, например: router.navigate ('theme/1000', {trigger: true});Этот код изменяет URL на http: //localhost/index.html#topic/1000 и запускает метод renderdetail. Следует отметить, что мы передаем конфигурацию триггера во втором параметре, который используется для обозначения того, запускается ли соответствующий метод действия при изменении URL.
3. Стоп () Метод
Помните, что мы начали прослушивать метод BACKBONE.History.Start (). Вы также можете вызвать метод Backbone.history.stop () в любое время, чтобы прекратить слушать, например:
router.route ('theme/: pageno/: pagesize', 'page', function (pageno, pagesize) {backbone.history.stop ();});Запустите этот код и получите доступ к URL: http: //localhost/index.html#topic/5/20. Вы обнаружите, что после выполнения этого действия слушание больше не вступит в силу.