tworzenieweb/ComponentExtension.php

## component.js
var component = {

    components: [],
    body: null,

    init: function()
    {
        var self = this;

        String.prototype.capitalize = function() {
                return this.charAt(0).toUpperCase() + this.slice(1);
        };

        this.body = $('body').append('<div class="modal-preloader"><i class="icon-upload icon-white"></i></div>').on({
            // When ajaxStart is fired, add 'loading' to body class
            ajaxStart: function() {

                $(this).addClass("loading");
            },
            // When ajaxStop is fired, rmeove 'loading' from body class
            ajaxStop: function() {
                $(this).removeClass("loading");
            }
        });

        $('.phpme-component').each(function() {

            var url = $(this).data('url');

            self.components.push([url, $(this)]);

            console.log("Component with url " + url + " was added");

        });

        return this;

    },

    refresh: function(component, action)
    {
        var self = this;
        $.get(action, function(content) {

            component.html(content).addClass('loaded');

            self.body.trigger('componentLoaded', {component: component, url: action});


       });
    },

    load: function()
    {
        var self = this;

        for(var i in this.components)
        {
            var current = this.components[i];

            (function(component) {

                var action = component[0];
                var context = component[1];

                self.refresh(context, action);

                context.on('componentRefresh', function() {

                    self.refresh(context,action);

                });

            })(current);


        }

    }

}

jQuery(function($) {

    component
            .init()
            .load();

});

## ComponentExtension.php
<?php

namespace Phpme\Bundle\ExampleBundle\Twig\Extension;


use Symfony\Bundle\FrameworkBundle\HttpKernel;

class ComponentExtension extends \Twig_Extension
{
    private $httpKernel;

    /**
     * @param \Symfony\Bundle\FrameworkBundle\HttpKernel $httpKernel
     */
    public function __construct(HttpKernel $httpKernel)
    {
        $this->httpKernel = $httpKernel;
    }

    /**
     * Returns a list of functions to add to the existing list.
     *
     * @return array An array of functions
     */
    public function getFunctions()
    {
        return array(
            'phpme_component'  => new \Twig_Function_Method($this, 'renderComponent', array('is_safe' => array('html'))),
        );
    }

    /**


    /**
     * Returns the name of the extension.
     *
     * @return string The extension name
     */
    public function getName()
    {
        return 'phpme_component';
    }

    public function renderComponent($name, $controller, array $attributes = array(), array $query = array(), $secure = true)
    {

        $uri = $this->httpKernel->generateInternalUri($controller, $attributes, $query, $secure);

        return <<<HTML
<div class="phpme-component" data-url="{$uri}" data-target="{$name}" id="{$name}">

    <div class="alert alert-info">
        <p><i class="icon-time"></i> Component is loading, please be patient</p>
    </div>

   </div>
HTML;

    }

}

## example.twig.html
<h2>List of items in store</h2>

{{ phpme_component(
    'exampleModule',
    'PhpmeExampleBundle:Default:items',
    {'section': app.request.get('section')}
   )
}}

## exampleModule.js
var Example = {

    // just placeholder for DOM node available after AJAX call
    exampleModule: null,

    /**
     * Drag and drop functionality for offers section
     */
    initExampleModule: function() {

      alert('Example module was loaded and is ready for some events binding');


    },

    initialize: function()
    {

        $('body').on('componentLoaded', function(e, data) {

            var id = data.component.attr('id');

            self[id] = data.component;

            self["init" + id.capitalize()]();

        });
    }

};

jQuery(function($) {

    Example.initialize();

});

## services.xml
<?xml version="1.0" ?>

<container xmlns="http://symfony.com/schema/dic/services"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">

    <services>
        <service id="phpme.component.twig.extension" class="Phpme\Bundle\ExampleBundle\Twig\Extension\ComponentExtension" public="false">
            <tag name="twig.extension" />
            <argument type="service" id="http_kernel" />
        </service>
    </services>
</container>
	var component = {

	components: [],
	body: null,

	init: function()
	{
	var self = this;

	String.prototype.capitalize = function() {
	return this.charAt(0).toUpperCase() + this.slice(1);
	};

	this.body = $('body').append('<div class="modal-preloader"><i class="icon-upload icon-white"></i></div>').on({
	// When ajaxStart is fired, add 'loading' to body class
	ajaxStart: function() {

	$(this).addClass("loading");
	},
	// When ajaxStop is fired, rmeove 'loading' from body class
	ajaxStop: function() {
	$(this).removeClass("loading");
	}
	});

	$('.phpme-component').each(function() {

	var url = $(this).data('url');

	self.components.push([url, $(this)]);

	console.log("Component with url " + url + " was added");

	});

	return this;

	},

	refresh: function(component, action)
	{
	var self = this;
	$.get(action, function(content) {

	component.html(content).addClass('loaded');

	self.body.trigger('componentLoaded', {component: component, url: action});


	});
	},

	load: function()
	{
	var self = this;

	for(var i in this.components)
	{
	var current = this.components[i];

	(function(component) {

	var action = component[0];
	var context = component[1];

	self.refresh(context, action);

	context.on('componentRefresh', function() {

	self.refresh(context,action);

	});

	})(current);




	}

	}

	}

	jQuery(function($) {

	component
	.init()
	.load();

	});
	<?php

	namespace Phpme\Bundle\ExampleBundle\Twig\Extension;


	use Symfony\Bundle\FrameworkBundle\HttpKernel;

	class ComponentExtension extends \Twig_Extension
	{
	private $httpKernel;

	/**
	* @param \Symfony\Bundle\FrameworkBundle\HttpKernel $httpKernel
	*/
	public function __construct(HttpKernel $httpKernel)
	{
	$this->httpKernel = $httpKernel;
	}

	/**
	* Returns a list of functions to add to the existing list.
	*
	* @return array An array of functions
	*/
	public function getFunctions()
	{
	return array(
	'phpme_component' => new \Twig_Function_Method($this, 'renderComponent', array('is_safe' => array('html'))),
	);
	}

	/**


	/**
	* Returns the name of the extension.
	*
	* @return string The extension name
	*/
	public function getName()
	{
	return 'phpme_component';
	}

	public function renderComponent($name, $controller, array $attributes = array(), array $query = array(), $secure = true)
	{

	$uri = $this->httpKernel->generateInternalUri($controller, $attributes, $query, $secure);

	return <<<HTML
	<div class="phpme-component" data-url="{$uri}" data-target="{$name}" id="{$name}">

	<div class="alert alert-info">
	<p><i class="icon-time"></i> Component is loading, please be patient</p>
	</div>

	</div>
	HTML;

	}

	}
	<h2>List of items in store</h2>

	{{ phpme_component(
	'exampleModule',
	'PhpmeExampleBundle:Default:items',
	{'section': app.request.get('section')}
	)
	}}
	var Example = {

	// just placeholder for DOM node available after AJAX call
	exampleModule: null,

	/**
	* Drag and drop functionality for offers section
	*/
	initExampleModule: function() {

	alert('Example module was loaded and is ready for some events binding');


	},

	initialize: function()
	{

	$('body').on('componentLoaded', function(e, data) {

	var id = data.component.attr('id');

	self[id] = data.component;

	self["init" + id.capitalize()]();

	});
	}

	};

	jQuery(function($) {

	Example.initialize();

	});
	<?xml version="1.0" ?>

	<container xmlns="http://symfony.com/schema/dic/services"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://symfony.com/schema/dic/services http://symfony.com/schema/dic/services/services-1.0.xsd">

	<services>
	<service id="phpme.component.twig.extension" class="Phpme\Bundle\ExampleBundle\Twig\Extension\ComponentExtension" public="false">
	<tag name="twig.extension" />
	<argument type="service" id="http_kernel" />
	</service>
	</services>
	</container>