Índice
Uma vez que tenhamos definido o que roteador em nosso aplicativo Backbone.js, temos que fazer com que ele escute as mudanças no URL, isto é, quando nosso usuário coloca um valor com seu respectivo hash, por exemplo, aplicacion.com/#ruta Com isso, além de possibilitar a escuta, o usuário também poderá marcar o aplicativo como favorito.Backbone.history
Como explicamos, este é o elemento que faz nosso aplicativo começar a escute as mudanças no url pegando os hashes, o importante sobre isso é que também nos ajuda a ser capaz de fazer um aplicativo que pode ter seções que são armazenadas como marcador ou marca páginas pelo usuário, criando assim seções que são acessadas diretamente sem ter que passar por muitos problemas.
Como usar?Para usar o Backbone.history devemos fazer isso, uma vez que definimos o objeto que inicializa nosso roteador e para isso fazemos isso através método .start ().
Vamos ver no código a seguir como essa ação seria:
var myRouter = novo exampleRouter (); Backbone.history.start ();
Neste caso, temos um Roteador chamado exampleRouter que é atribuído à variável miRouter, como indicamos uma vez que esta ação é feita é que usamos o método .start () como vemos na última linha do exemplo.
Se executarmos o seguinte Roteador Em nosso servidor da web, podemos ver como o que explicamos funciona para nós:
var exampleRouter = Backbone.Router.extend ({routes: {"test": "sampleTest", "search /: query / p: page": "searchConsult", "* other": "defaultRoute",}, sampleTest: function () {console.log ("Acessamos o teste do roteador");}, searchQuestion: function (query, page) {var page_no = page || 1; console.log ("The page no:" + page_no + " da pesquisa que contém a palavra: "+ consulta);}, defaultRoute: função (outro) {console.log ('O recurso:' + outro + 'Não existe');}}); var myRouter = novo exampleRouter (); Backbone.history.start (); Vamos ver na imagem a seguir como fica quando acessamos o caminho de pesquisa e passamos os parâmetros que queremos:
Método This.navigate
Este método é o que nos permite atualize o URL do aplicativo a partir de um método, isso nos ajuda a evitar ter que recarregar a página e assim não perder o propósito de um aplicativo de página única, o detalhe é que este método não o faz passar pelo roteador, então devemos fazê-lo explicitamente, vejamos os exemplos:
1- Sem passar pelo roteador:
viewTask: function (id) {console.log ("Ver a tarefa solicitada."); this.navigate ("tarefa /" + id + '/ editar'); // atualiza o URL, mas não passa pelo roteador}, 2- Com a correção que o faz passar pelo roteador:
viewTask: function (id) {console.log ("Ver a tarefa solicitada."); this.navigate ("task /" + id + '/ edit', {trigger: true}); // atualiza o URL, mas não passa pelo roteador}, Com isso já alcançamos o objetivo de dentro do aplicativo mudar url e imediatamente passar pelo roteador diretamente.
Ao final deste tutorial vimos a utilidade de poder acessar nosso aplicativo através de URLs amigáveis, pois isso nos ajuda a torná-lo mais legível para os motores de busca e para os usuários, melhorando assim o SEO.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
