funddy/jsrouting-bundle

JsRouting for Symfony2

FunddyJsRoutingBundle

, _(*1)

This bundle enables you to use your Symfony routes from JavaScript, allowing the generate routes in a very similar way. Inspired by FOSJsRoutingBundle, it supports static and dynamic routes generation., _(*2)

Setup and Configuration

Add the following to your composer.json file:, _(*3)

{
    "require": {
        "funddy/jsrouting-bundle": "1.0.*"
    }
}

Update the vendor libraries:, _(*4)

curl -s http://getcomposer.org/installer | php
php composer.phar install

For finishing, register the Bundle FunddyJsRoutingBundle in app/AppKernel.php., _(*5)

// ...
public function registerBundles()
{
    $bundles = array(
        // ...
        new Funddy\Bundle\JsRoutingBundle\FunddyJsRoutingBundle()
        // ...
    );
    // ...
}

Usage

Expose the routes that you want to have accessible from your JavaScript code adding the "expose" option to the routing entry, _(*6)

example:
    pattern: /example/{param}
    defaults: { _controller: Bundle:Controller:action }
    options:
        expose: true

Now it's time to decide whether you want to use static, dynamic or mixed routes., _(*7)

Dynamic Routes

This is the most flexible option. Every time you make a change in exposed routes you'll be able to access them from JavaScript. It's ideal for development environment or for those cases where you performance is not an issue. As everything in life, you have to pay a price, which is invoking an URL to regenerate all routes every time you make a request., _(*8)

Include FunddyJsRoutingBundle routing, _(*9)

jsrouting:
    resource: "@FunddyJsRoutingBundle/Resources/config/routing.yml"

Include the scripts, _(*10)

<script type="text/javascript" src="{{ path('funddy_jsrouting') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/funddyjsrouting/js/lib/jsroutingrouter.js') }}"></script>

Static Routes

Is the best solution when we talk about performance, you can include the routes with your own scripts on a single one (only one request)., _(*11)

Compile the routes, _(*12)

php app/console funddy:jsrouting:dump

Include routes in a single script, _(*13)

{% javascripts output='js/output.js'
    'js/routes.js'
    'bundles/funddyjsrouting/js/lib/jsroutingrouter.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Mixed Approach

So, if dynamic routes is the most flexible option and static is the one with the best performance... You can always use dynamic approach for development environment and static for production!, _(*14)

{% if app.environment != 'prod' %}
    
{% endif %}

{% javascripts output='js/output.js'
    'js/routes.js'
    'bundles/funddyjsrouting/js/lib/jsroutingrouter.js'
%}

{% endjavascripts %}

Don't worry, if the routes were already defined, the next load it will not override them., _(*15)

Have fun!

<script type="text/javascript">
    var url = Router.generate('example', {param: 'test'});
</script>

Defining Your Own Router

What if you do not want to use the default "Router" global var and define your own? Easy, include only routing runtime and define your own router., _(*16)

<script type="text/javascript" src="{{ path('funddy_jsrouting') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/funddyjsrouting/js/lib/jsrouting.js') }}"></script>
<script type="text/javascript">
    var MyOwnRouter = (function() {
        router = new FUNDDY.JsRouting.Router(
            FUNDDY.JsRouting.Routes,
            new FUNDDY.JsRouting.BagFactory(),
            new FUNDDY.JsRouting.RouteFactory()
        );

        generate = function(routeName, parameters) {
            return router.generate(routeName, parameters);
        };

        return {
            generate: generate
        };
    })();

    var route = MyOwnRouter.generate('example');
</script>