grevory/Templating.markdown

## index.html
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<html>
<div id="template">
  <h1>Welcome {{ user }}</h1>
</div>
</html>

## script.js
var compileData = function(template, data){
  var dataIndex;

  for (dataIndex in data) {

    template = template.replace(new RegExp('{{\\s*' + dataIndex + '\\s*}}', 'gi'), data[dataIndex]);
  }

  return template;
}

var template = compileData($('#template').html(), {
  'user': 'Kevin Flynn'
});
$('#template').html(template);

## style.css
html {
  background: url(http://lovinlosing.com/wallpaper/minimalistic-tron_77649.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #e4b72d;
  font-family: sans-serif;
}

h1 {
  position: absolute;
  top: 60%;
}

## Templating.markdown

      
    Raw
  

              Templating.markdown
            
          
    Templating

A simple template function that compiles data into the template.
Built for demoing my Andraia Mobile JS framework.
A Pen by Gregory Pike on CodePen.
License.
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<html>
	<div id="template">
	<h1>Welcome {{ user }}</h1>
	</div>
	</html>
	var compileData = function(template, data){
	var dataIndex;

	for (dataIndex in data) {

	template = template.replace(new RegExp('{{\\s' + dataIndex + '\\s}}', 'gi'), data[dataIndex]);
	}

	return template;
	}

	var template = compileData($('#template').html(), {
	'user': 'Kevin Flynn'
	});
	$('#template').html(template);
	html {
	background: url(http://lovinlosing.com/wallpaper/minimalistic-tron_77649.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #e4b72d;
	font-family: sans-serif;
	}

	h1 {
	position: absolute;
	top: 60%;
	}