O roteador no backbone atua como uma função de roteamento, controlando a direção do URL e entra em vigor ao usar a tag # no URL.
Definir um roteador requer pelo menos um roteador e uma função para mapear um URL específico, e precisamos lembrar que, no backbone, qualquer caractere após a tag # será recebida e interpretada pelo roteador.
Vamos definir um roteador:
<cript> var aproteter = backbone.router.extend ({rotas: {"*ações": "Defaultroute" // corresponde a http://example.com/#anything-here}}); // instanciado roteador var app_Router = novo apropriado; App_Router.on ('Route: Defaultroute', function (ações) {alert (ações);}) // Abra o histórico de backbone backbone.history.start (); </script>Agora, definimos um roteador, mas neste momento o roteador não corresponde ao URL específico. Em seguida, começaremos a explicar em detalhes como o roteador funciona.
Roteamento dinâmico
Backbone permite definir um roteador com parâmetros específicos. Por exemplo, você pode querer receber uma postagem por meio de um ID específico, como um URL: "http://example.com/#/posts/12". Depois que este roteador estiver ativado, você pode obter uma postagem com um ID de 12. Em seguida, vamos definir este roteador:
<Cript> var aproteter = backbone.router.extend ({rotas: {"Posts/: id": "getPost", "*ações": "defhaultroute" // backbone corresponderá às rotas de acordo com a ordem}}); // instanciado roteador var app_Router = novo apropriado; app_router.on ('rota: getPost', function (id) {// Observe que os parâmetros são passados aqui alert ("Obtenha o número de postagem" + id);}); App_Router.on ('Route: Defaultroute', function (ações) {alert (ações);}); // Abra o backbone da Backbone.Regras correspondentes
A Backbone usa duas formas de variáveis para definir as regras correspondentes para o roteador. O primeiro é:, que pode corresponder a quaisquer parâmetros entre barras no URL, e o outro é *, que é usado para combinar todas as partes atrás das barras. Observe que, como o segundo formulário tem uma ambiguidade maior que a primeira, ele tem a menor prioridade de correspondência.
O resultado de qualquer forma de correspondência é passado para a função relevante como um parâmetro. A primeira regra pode retornar um ou mais parâmetros, e a segunda regra retorna o resultado inteiro da correspondência como um parâmetro.
Em seguida, vamos usar exemplos para ilustrar:
routes:{ "posts/:id": "getPost", // <a href="http://example.com/#/posts/121">Example</a> "download/*path": "downloadFile", // <a href="http://example.com/#/download/user/images/hey.gif">Download</a> ":route/:action": "loadview", // <a href = "http://example.com/#/dashboard/graph"> carregar rota/ação view </a>}, app_router.on ('rota: getPost', function (id) {alert (id); // após a correspondência, o parâmetro passado é 12}); alerta (caminho);Você pode ouvir frequentemente a palavra "roteador", mas geralmente se refere a um dispositivo de rede que é uma navegação e hub para conexões de rede, transmissão de dados. A função "roteador" no backbone é semelhante a ela. Como você pode ver no exemplo acima, ele pode navegar em diferentes âncoras de URL para o método de ação correspondente.
(Esse mecanismo também é fornecido em muitas estruturas da web do lado do servidor, mas backbone.Router se concentra mais na navegação de aplicativos de uma página de frente.)
A navegação de roteamento de Backbone é feita por duas classes backbone.Router e Backbone.history:
Geralmente, não instanciamos diretamente um histórico, porque quando criamos uma instância do roteador pela primeira vez, criaremos automaticamente um objeto singleton da história, que você pode acessar no backbone.history.
Para usar a função de roteamento, primeiro precisamos definir uma classe de roteador para declarar as regras e ações da URL que precisam ser ouvidas. No exemplo agora, definimos a lista de URL a ser ouvida através do atributo de rotas ao definir, onde a chave representa as regras e o valor da URL representa o método de ação executado quando o URL está nesta regra.
Regras de hash
As regras de URL representam o fragmento de hash (ponto de âncora) no URL atual. Além de poder especificar seqüências gerais nas regras, também precisamos prestar atenção a duas regras dinâmicas especiais:
Uma sequência separada por / (Slash) na regra será convertida em uma expressão ([^//]+) dentro da classe do roteador, representando vários caracteres começando com / (Slash). Se: (cólon) estiver definido nesta regra, significa que essa sequência no URL será passada para a ação como um parâmetro.
Por exemplo, definimos o tópico da regra/: id. Quando o ponto de ancoragem é #tópico/1023, 1023 será passado para a ação como ID do parâmetro. O nome do parâmetro (: id) na regra geralmente será o mesmo que o nome formal do parâmetro do método de ação. Embora o roteador não tenha essas restrições, é mais fácil entender usando o mesmo nome de parâmetro.
* (asterisco) na regra é convertido em uma expressão (.*?) Dentro do roteador, representando caracteres zero ou mais arbitrários. Comparado à regra: (cólon), * (asterisco) não tem limitação de separação não / (barra), assim como a * regra de erro que definimos no exemplo acima.
A regra * (Asterisk) no roteador usa um padrão de não-greedos após ser convertido em uma expressão regular, para que você possa usar uma regra de combinação como esta: * Tipo/: ID, que pode corresponder a #Hot/1023 e passará a quente e 1023 como parâmetros ao método de ação.
O acima introduz como as regras são definidas. Essas regras corresponderão a um nome de método de ação, que deve estar em um objeto de roteador.
Depois de definir a aula do roteador, precisamos instanciar um objeto de roteador e chamar o método start () do objeto de backbone.history, que começará a ouvir o URL. Dentro do objeto de história, o evento ONHASHCHANGE será usado para ouvir alterações no URL no hash (ponto de ancoragem). Para os navegadores que não suportam o evento OnhashChange (como o IE6), a história ouvirá o batimento cardíaco do setInterval.
PushState Regras
Backbone.history também suporta URLs PushState. PushState é um novo recurso fornecido pelo HTML5. Ele pode operar o URL do navegador atual (em vez de apenas alterar o ponto de ancoragem) e não causará atualização da página, tornando um aplicativo de uma única página mais como um processo completo.
Para usar o recurso PushState, você precisa primeiro entender alguns dos métodos e eventos fornecidos pelo HTML5 para esse recurso (esses métodos são definidos na janela. Objeto História):
1.pushstate (): Este método pode adicionar uma nova entidade de história ao histórico do navegador ao URL especificado.
2.Replacestate (): Este método pode substituir a entidade de história atual pelo URL especificado
Os métodos chamando pushState () e replacestate () é apenas para substituir o URL da página atual e ele realmente não irá para esse endereço de URL (ao usar o botão traseiro ou avançar, ele não pulará para o URL). Podemos ouvir as alterações de URL causadas por esses dois métodos através do evento OnPopstate.
Métodos relacionados ao roteamento
1.Route () Método
Depois de definir as regras de roteamento, se for necessário ajuste dinâmico, você poderá chamar o método do roteador.Route () para adicionar dinamicamente regras de roteamento e métodos de ação, por exemplo:
Router.Route ('Topic/: Pageno/: Pagesize', 'Page', function (Pageno, PageSize) {// TODO}); Quando chamamos o método da rota (), a regra fornecida pode não ser apenas uma string, mas também uma expressão regular: roteter.Route (/^tópico /(.*?2.navigate () método
No exemplo anterior, as regras da URL são acionadas por nossa entrada manual. Em aplicações reais, às vezes pode ser necessário pular e navegar manualmente, e você pode chamá -lo
O método Router.NAVigate () é usado para controle, por exemplo: Router.navigate ('tópico/1000', {trigger: true});Este código altera o URL para http: //localhost/index.html#topic/1000 e desencadeia o método RenderDetail. Deve -se notar que passamos na configuração do gatilho no segundo parâmetro, que é usado para indicar se o método de ação correspondente é acionado durante a alteração do URL.
3.Stop () Método
Lembre -se de que começamos a rotear a escuta no método backbone.history.start (). Você também pode ligar para o backbone.history.stop () a qualquer momento para parar de ouvir, por exemplo:
Router.Route ('Topic/: Pageno/: Pagesize', 'Page', function (pageno, Pagesize) {backbone.history.stop ();});Execute este código e acesse o URL: http: //localhost/index.html#topic/5/20. Você descobrirá que, depois que essa ação for executada, a escuta não entrará em vigor.