Template Controller

template.js

// Template Controller jQuery plug-in
//
// Contribute : greenlikeorange <beginofalove@hotmail.com>
// License : MIT

(function(jQuery){

	// Template Selector RegExp ${data}
	var reTmp = /\${([\w\.]+)}/;

	// Replace HTML with template Data;
	function htmlTemplateRepalce(templateHTML, data){
		var match = templateHTML.match(/\${([\w\.]+)}/g);
		var i = 0;

		for (; i < match.length; i++) {
			var rematch = reTmp.exec(templateHTML);
			var que = rematch[1].split('.');
			var queData = data;
			var j = 0;

			for (; j < que.length; j++) {
				queData = queData[que[j]];
			}

			templateHTML = templateHTML.replace(reTmp, queData);
            
            		// Return edited html
			if ( i == match.length -1 ) return templateHTML;
		}

	}

	jQuery.fn.extend({
	    	// First step for template
		template: function(data){
			this.tmpnode = this.find("[role='template']");
			this.tmpnodeHTML = this.tmpnode.html();
			this.templateNodes = [];
			var i = 0;
			var match;
			var last = this.tmpnode;

			// For Defining position for template, the original will be left behind screen
			this.tmpnode.hide();

			for (; i < data.length; i++) {
				var clone = this.tmpnode.clone(true);
				last.after(clone); last = clone;
				clone.html( htmlTemplateRepalce(this.tmpnodeHTML, data[i]) );
				clone.tmpData = data[i];
				clone.show();
				this.templateNodes.push(clone);
			}
            
            		// Return added $(element) by arrayed for fulture reference
			this.templateAdd = function(data) {
				var i = 0;
				var last = this.templateNodes[this.templateNodes.length - 1] ||
							this.tmpnode;
				var added = [];
				for (; i < data.length; i++) {
					var clone = this.tmpnode.clone(true);
					last.after(clone); last = clone;
					clone.html( htmlTemplateRepalce(this.tmpnodeHTML, data[i]) );
					clone.tmpData = data[i];
					clone.show();
					// For Return
					added.push(clone);
					this.templateNodes.push(clone);

					if( i == data.length - 1 ) return added;
				}
			};
            
		        // *nonFullyRemove will prevent removing item from DOM
		        // but it will remove from templateNode list
		        // that mean you can't remove that item again
			this.tempateRemove = function(name, value, nonFullyRemove){
				var i = 0;
				var len = this.templateNodes.length;
				var removed = [];
				for (; i < len; i++) {
					
					if(this.templateNodes[i] && this.templateNodes[i].tmpData[name] == value){
						// For Adding Animation for removing
						if( !notRemove ) this.templateNodes[i].remove();
						// Record for middle Process
						removed.push(this.templateNodes[i]);

						this.templateNodes.splice(i, 1);
					}

					if( i == len - 1 ) return removed;
				}
			};

			return this;
		}
	});
}(jQuery));