RoundTrip

What can I do with Frontendcore's RoundTrip?

Roundtrip combines the power of twig.js and FrontendCore to render twig templates in realtime and refresh them if there are changes in the data. Any of this renders can use FrontendCore UI modules or custom modules.

What I can't do?

Roundtrip doesn't have a system to change the main layout, or load different templates based on url, for things like this maybe it's a good idea to use angular, emberjs or something like that.

How it works?

The system is pretty simple, so make it work is fast and easy. All you need is to include the script on your page:

<script type="text/javascript" src="js/roundtrip.js"></script>

Add a JSON with the data as javascript object

<script>
    var RoundTripData = {
        "products" : {
            "0" : {
                "name" : "hat",
                "quantity" : 1
            },
            "1" : {
                "name" : "suitcase",
                "quantity" : 2
            },
            "2" : {
                "name" : "umbrella",
                "quantity" : 3
            }
        },
        "user" : {
            "0" : {
                "name" : "john",
                "surname" : "Doe"
            },
            "1" : {
                "name" : "Marie",
                "surname" : "Doe"
            },
            "2" : {
                "name" : "Mike",
                "surname" : "Doe"
            }
        }
    };
</script>

Add the markup for one of the template renders

<div data-fc-render="product" data-fc-template="twig/product-list.html.twig"></div>

This will render the template located in "twig/product-list.html.twig" with all the data from RoundTripData.

Get Data and channels from an external JSON file

Add to the markup of your template render the parameter "data-fc-data" with the url of the JSON file

<div data-fc-render="product" data-fc-template="twig/product-list.html.twig" data-fc-data="json/product-list.json"></div>

Get partial channels from RoundTripData

Add to the markup of your template an array with the key of RoundTripData object that you want to get

<div data-fc-render="product" data-fc-template="twig/product-list.html.twig" data-fc-data="[products]"></div>

Update data

Call on your module the Data method of RoundTrip and pass a new data object.

RoundTrip.Data({
    "Products" : {
        "0" : {
            "name" : "Coat",
            "quantity" : 1
        }
    }
});

Bind elements

Because on each render the jquery or javascript bind is lost, Roundtrip provides you a bind method that always work even the module is reloaded.

RoundTrip.bind( '#click-me' , 'click', function(e){
    e.preventDefault();
    console.log('CLICK!');
});