Utilizando o roteamento do Symfony2 para gerar as URLs em seus JavaScripts

Ao desenvolvermos aplicações web nos deparamos com a situação de qual será a melhor forma de escrever as URLs em nossos scripts e funções JavaScript, quando utilizamos, por exemplo, requisições ajax.

Para simplificar esta tarefa, temos o FOSJsRoutingBundle, criado por William DURAND, que utiliza as próprias regras de roteamento configuradas na sua aplicação desenvolvida com o Symfony2.

Um exemplo de utilização bem simples:

Definimos a nossa rota no arquivo de configuração do roteamento (routing.yml):


# app/config/routing.yml
pessoa_local:
    pattern:  /pessoa/local
    defaults:  { _controller: MyBundle:Pessoa:local }
    options:
        expose: true

Importante: a opção expose deve ser definida como true

No layout, chamamos as bibliotecas JS para gerar as URLs:


<script type="text/javascript" 
    src="{{ asset('bundles/fosjsrouting/js/router.js') }}">
</script>
<script type="text/javascript" 
    src="{{ path('fos_js_routing_js', 
         {"callback": "fos.Router.setData"}) }}">
</script>

Em nosso JS, geramos a URL definida na rota chamando Routing.generate('id_da_rota', parametros):


  $(document).ready(function(){
	var url = Routing.generate('pessoa_local');
        $("#frm").relatedSelects({
            onChangeLoad: url,
            loadingMessage: 'Carregando, favor aguarde...',
            selects: ['pessoa[pais_id]', 
                      'pessoa[uf_id]', 
                      'pessoa[municipio_id]'],
            disableIfEmpty:true,
            onEmptyResult: function(){
                alert('Não existem opções disponíveis para ' +
                      $(this).find('option:selected').text() + 
                      '!');
            }
        });
});

3 comentários em “Utilizando o roteamento do Symfony2 para gerar as URLs em seus JavaScripts

  1. romeugodoi disse:

    Maravilha ver esse tutorial! Estava em busca disso.
    Vou tentar implementar com ExtJS.
    Obrigado por compartilhar.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s