krawaller/exampleusage.js

## exampleusage.js
win.add(createKraWebView({template: "templateexamaple.html",data:{name:"ole",role:"bass",presentation:"<p>Nice guy!</p>"}}));

## krawaller.js
createKraWebView = function(o){
    var webview = Ti.UI.createWebView({url: "../views/"+ (o.masterPageFile || "masterpage.html")}),
        template = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory+"/views/"+o.templateFile).read().text,
        opts = { template: template, data: {data: o.data} };
    webview.addEventListener("load",function(){ webview.evalJS("render("+JSON.stringify(opts)+")"); });
    return webview;
}

## masterpage.html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <title>MasterPage</title>
        <script type="text/javascript">
// Templating function by John Resig, see article here: http://ejohn.org/blog/javascript-micro-templating/
var tmpl = function(str, data){
    var err = "";
    try {
        var func = tmpl.cache[str];
        if (!func) {
            var strFunc = "var p=[];with(obj){p.push('" +
            str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^#]*#>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<#=(.+?)#>/g, "',$1,'").split("<#").join("');").split("#>").join("p.push('") +
            "');}return p.join('');";
            func = new Function("obj", strFunc);
            tmpl.cache[str] = func;
        }
        return func(data);
    }
    catch (e) {
        Ti.App.fireEvent('error', e);
    }
    return '<div style="width: 200px; margin: 0 auto; text-align: center; font-size: 20px; font-family: Helvetica; margin-top: 100px;">Something went wrong. Please try again.</div>';
}
tmpl.cache = {};
        </script>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <style type="text/css">
.beforeload { opacity: 0; }

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadein {
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
}
        </style>
    </head>
    <body class="beforeload">
        <div id="wrapper" class=""><div class="loading">Loading...</div></div>
        <script type="text/javascript">
function render(o){
    var w = document.getElementById('wrapper');
    w.innerHTML = tmpl(o.template, o.data);
    document.body.className = "fadein";
}
        </script>
    </body>
</html>

## templateexample.html
<div>
  <h2>Data</h2>
  <dl>
    <dt>Name:</dt><dd><#=data.name#></dd>
    <dt>Role:</dt><dd><#=data.role#></dd>
    <dt>Member:</dt><dd><#=data.member#></dd>
  </dl>
</div>
<# if(data.presentation){ #>
  <div>
    <h2>Presentation</h2>
    <#= data.presentation #>
  </div>
<# }; #>
<# if(data.comments){ #>
  <# for(var i=0; i<data.comments.length; i++){ var c = data.comments[i]; #>
    <div>
      <h2><#= c.name #> says:</h2>
      <#= c.content #>
    </div>
  <# }; #>
<# }; #>
	createKraWebView = function(o){
	var webview = Ti.UI.createWebView({url: "../views/"+ (o.masterPageFile \|\| "masterpage.html")}),
	template = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory+"/views/"+o.templateFile).read().text,
	opts = { template: template, data: {data: o.data} };
	webview.addEventListener("load",function(){ webview.evalJS("render("+JSON.stringify(opts)+")"); });
	return webview;
	}
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>MasterPage</title>
	<script type="text/javascript">
	// Templating function by John Resig, see article here: http://ejohn.org/blog/javascript-micro-templating/
	var tmpl = function(str, data){
	var err = "";
	try {
	var func = tmpl.cache[str];
	if (!func) {
	var strFunc = "var p=[];with(obj){p.push('" +
	str.replace(/[\r\t\n]/g, " ").replace(/'(?=[^#]*#>)/g, "\t").split("'").join("\\'").split("\t").join("'").replace(/<#=(.+?)#>/g, "',$1,'").split("<#").join("');").split("#>").join("p.push('") +
	"');}return p.join('');";
	func = new Function("obj", strFunc);
	tmpl.cache[str] = func;
	}
	return func(data);
	}
	catch (e) {
	Ti.App.fireEvent('error', e);
	}
	return '<div style="width: 200px; margin: 0 auto; text-align: center; font-size: 20px; font-family: Helvetica; margin-top: 100px;">Something went wrong. Please try again.</div>';
	}
	tmpl.cache = {};
	</script>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type="text/css">
	.beforeload { opacity: 0; }

	@-webkit-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	.fadein {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	}
	</style>
	</head>
	<body class="beforeload">
	<div id="wrapper" class=""><div class="loading">Loading...</div></div>
	<script type="text/javascript">
	function render(o){
	var w = document.getElementById('wrapper');
	w.innerHTML = tmpl(o.template, o.data);
	document.body.className = "fadein";
	}
	</script>
	</body>
	</html>
	<div>
	<h2>Data</h2>
	<dl>
	<dt>Name:</dt><dd><#=data.name#></dd>
	<dt>Role:</dt><dd><#=data.role#></dd>
	<dt>Member:</dt><dd><#=data.member#></dd>
	</dl>
	</div>
	<# if(data.presentation){ #>
	<div>
	<h2>Presentation</h2>
	<#= data.presentation #>
	</div>
	<# }; #>
	<# if(data.comments){ #>
	<# for(var i=0; i<data.comments.length; i++){ var c = data.comments[i]; #>
	<div>
	<h2><#= c.name #> says:</h2>
	<#= c.content #>
	</div>
	<# }; #>
	<# }; #>