javascriptjqueryjsrender

Call JavaScript function from JsRender


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?


Solution

  • 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.