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() + 
                      '!');
            }
        });
});