I have a JsRender template. When template is rendering I want to call a JavaScript function to manipulate some data.
Here is my JsRender template.
<tr class="template-download">
<td class="size">
<span>{{:size}}</span>
</td>
</tr>
Now I want to pass :size
value to JavaScript function and get the return value. So I can show return value instead of :size
value.
My JavaScript function is
function getSize(size) {
var megabytes = size / (1024 * 1024);
return megabytes.toFixed(2) + "MB";
}
How can I do this?
You can do this by using a helper function. When you call render, you can define and pass a helper function 'into' your template:
$("#tmpl").render(data, {
getSize: function(size) {
var megabytes = size / (1024 * 1024);
return megabytes.toFixed(2) + "MB";
}
});
Then, in your template, you call the helper function like this:
<tr class="template-download">
<td class="size">
<span>{{:size}} {{:~getSize(size)}} </span>
</td>
</tr>
I've made a couple of assumptions about how your template is being used, but this should get you going.
This article has a section related to helper functions, and @BorisMoore has a number of good examples on his jsViews site.