JsRender - helper function
http://stackoverflow.com/questions/9189578/how-to-use-javascript-variables-in-jsrender
HTML
<script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
<script id="movieTemplate" type="text/x-jsrender">
<tr>
<td>{{:Title}}</td>
<td>
<!-- Use the helper function to display the title -->
{{:~GetTitleFunction()}}
{{for Languages}}
<div>
<em>{{:Name}}</em>
<!-- Use the view path for parent. could also do #view.parent.parent.data -->
<em>( {{:#parent.parent.data.Title}} )</em>
<!-- Use the helper function and view path -->
<em>{{:~GetTitleFunction(#parent.parent.data)}}</em>
<em>{{:~kk}}</em>
</div>
{{/for}}
</td>
</tr>
</script>
<table><tbody class="header"><tr><th>Title</th><th>Languages</th></tr></tbody>
<tbody id="movieList"></tbody>
</table>
CSS
table { border-collapse: collapse; }
table tr { color: blue; height: 25px; }
.header { color: #009; border-bottom: solid #77c 2px; background-color: #E8E8F7; }
.header th { padding:5px; border: 1px solid #77c; }
#movieList tr td:first-child { width: 130px; }
table { border: 2px solid blue; width: 480px; margin: 4px 0 24px 4px; padding: 2px; background-color: #f8f8f8; }
table td { padding: 3px; margin: 3px; border: solid #77c 1px; }
JavaScript
var vm = {
getTitle: function(arg){
var title;
if(arg){
title = arg.Title;
}
else{
title = this.data.Title;
}
return "Title : " + title;
},
movies: [
{
Title: "Meet Joe Black",
Languages: [
{ Name: "English" },
{ Name: "French" }
]
},
{
Title: "Eyes Wide Shut",
Languages: [
{ Name: "French" },
{ Name: "Mandarin" },
{ Name: "Spanish" }
]
}
]};
$.views.helpers({ GetTitleFunction: vm.getTitle });
$.views.helpers({ kk: 'pp' });
$.templates("movieTmpl", {
markup: "#movieTemplate",
//allowCode: true
});
$( "#movieList" ).html(
$.render.movieTmpl( vm.movies )
);