I'm using phonegap with handlebars but even if I precompiled the templates is still slow.
Maybe putting a script inside a template is causing this.
<table class="table table-striped table-hover">
<thead>
<tr>
<th>IMG</th>
</tr>
</thead>
<tbody>
{{#each array}}
<tr>
<td>
<a href= "{{this}}" class="swipebox" title="My Caption">
<img src= "{{this}}" alt="image" width="50" height="50">
</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
<script>
var table = $('table').dataTable({
lengthMenu: [[-1, 50, 25, 10], ["Todo", 50, 25, 10]],
sPaginationType: "full_numbers",
language: {
"url": "json/Spanish.json"
}
});
</scr{{undefined}}ipt>
Your HTML is atrocious. The reason for the slowdown cannot be addressed without your view model.
This is the context
<script type="text/javascript">
var array = [];
for (i = 0; i < 3; i++) {
var src = "img/arrow_ + i + .png";
array.push(src);
}
var context = {"array":array}
var theCompiledHtml = Handlebars.templates['events.tmpl'](context);
$('.render').html(theCompiledHtml);
</script>
var theCompiledHtml = Handlebars.templates['events.tmpl'](context);
I'm not sure what your function in the script tags are for; appears to be for iterating over an array of images, but the code I pasted in for calling your precompiled template doesn't belong there.
Ideally, you'd have a single app file with your template calls, telling the page where to output the rendered HTML.
Right now, I think what I'm seeing will result in your precompiled template being fully evaluated by the browser, before rendering. This makes precompiling worthless.
Closing due to inactivity.