adrma.plpComponent.js

function Component(type) {
	this.type = type;
	this.tmplName = type + 'ComponentTmpl';
	this.placeholder = type + 'Placeholder';
}

Component.prototype.render = function(data) {
	var type = this.type;
	
	adrma.template.render({
		template: this.tmplName,
		ele: "#" + this.placeholder,
		method: "html",
		data: {
			type: type,
			data: data
		}
	});
}

adrma.plpDispatcher.js

adrma.plpDispatcher = {
	init: function init() {
		var self = this;
		
		adrma.actions.add({
			plpActionCall: function plpActionCall(e, jThis) {
				self.onPLPActionCall(e, jThis)
			}
		})
	},
	onPLPActionCall: function onPLPActionCall(e, jThis) {
		var self = this,
			link = jThis.attr('data-link'),
			type = jThis.attr('data-component-type'),
			requestData;
		
		requestData = {
			link: link,
			type: type
		};
		
		//GET DATA
		adrma.fetchData({
			url: link,
			data: requestData,
			type: "GET",
			dataType: "json"
		}).done(function(response) {
			self.updateComponents(response.data);
		});
	},
	updateComponents: function updateComponents(data) {
		var self = this;
		
		//UPDATE ALL COMPONENTS OR
		//WE CAN MAKE MAP WHAT UPADTE FOR EACH LINK
		for (var component in  adrma.plpComponent) {
			self.updateComponent(component.type, data);
		}
	},
	updateComponent: function updateComponent(type, data) {
		adrma.plpComponents[type + 'Component'].render(data);
	}
};

//CREATE ALL COMPONENTS
adrma.plpComponents = {
	headerComponent: new Component('header'),
	breadCrumbsComponent: new Component('breadCrumbs'),
	listComponent: new Component('list'),
	filtersComponent: new Component('filters'),
};

adrma.init.add({
	name: "plpDispatcher",
	cb: function () {
		//SET ACTION ON ACTIVE LINKS
		adrma.plpDispatcher.init();
	}
});

plpComponents.html

<script type="text/html" id="breadcrumbs">
//active link
<a class="action" data-action="plpActionCall" data-link="<%= obj.data.link %>" data-component-type="<%= obj.type %>"></a>
//...some html....
</script>

<script type="text/html" id="refinements">
//active link
<a class="action" data-action="plpActionCall" data-link="<%= obj.data.link %>" data-component-type="<%= obj.type %>"></a>
//...some html....
</script>

<script type="text/html" id="banners">
//active link
<a class="action" data-action="plpActionCall" data-link="<%= obj.data.link %>" data-component-type="<%= obj.type %>"></a>
//...some html....
</script>

<script type="text/html" id="filters">
//active link
<a class="action" data-action="plpActionCall" data-link="<%= obj.data.link %>" data-component-type="<%= obj.type %>"></a>
//...some html....
</script>

<script type="text/html" id="paging">
//...some html....
</script>

//... ALL Elements ....