Skip to content

Instantly share code, notes, and snippets.

@krawaller
Created July 24, 2010 08:19
Show Gist options
  • Save krawaller/488533 to your computer and use it in GitHub Desktop.
Save krawaller/488533 to your computer and use it in GitHub Desktop.
win.add(createKraWebView({template: "templateexamaple.html",data:{name:"ole",role:"bass",presentation:"<p>Nice guy!</p>"}}));
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>
<# }; #>
<# }; #>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment