How to use javascript variables in jsRender?

Question

I want to use as following.

<script id="movieTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td>{{=Title}}</td>
        <td>
            {{* var title = $ctx.GetTitleFunction($view);}}
            {{#each Languages}}
                <div>                   
                    <em>{{=Name}}</em>
                    <em>({{* title;}})</em>
                </div>
            {{/each}}
        </td>
    </tr>
</script>

<script type="text/javascript">

    function GetTitle(data){
        return "Title : " + data.Title;
    }

    var movies = [
        {
            Title: "Meet Joe Black",
            Languages: [
                { Name: "English" },
                { Name: "French" }
            ]
        },
        {
            Title: "Eyes Wide Shut",
            Languages: [
                { Name: "French" },
                { Name: "Mandarin" },
                { Name: "Spanish" }
            ]
        }
    ];

    $.views.allowCode = true;
    $.views.registerHelpers({ GetTitleFunction: GetTitle });
    $( "#movieList" ).html(
        $( "#movieTemplate" ).render( movies )
    );

</script>  

I cannot use {{* title;}} or {{* =title}} to render javascript variable.
How can I render value in javascript variable?

Answer 1

I created a fiddle to show you how use a helper function to return the title. It combines helper functions and view paths using the new beta candidate syntax. I did not need to use allowCode to do this ... allowCode let's you define variables and process logic, but its not full access to the given javascript (for safety). Regardless, I think the code is much cleaner without the allowCode, but you make the call :)

http://jsfiddle.net/johnpapa/LqchY/

Note that the new changes from Boris post: http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html

The code below has these notable changes:

1. The new syntax is to use {{:yourProperty}} to render the property value.
2. {{#each}} has been replaced with {{for}}
3. helper functions are now referenced with a tilda ~ instead of ctx
4. When inside of a for loop, you can access the parent context using the #view.parent or simply #parent (because view is implied). So wen inside of an array loop you must 1 parent gets you to the array, another parent gets you to the parent of the array, and data gets you the data. Its a little verbose, but it allows you to have access to context. {{:#parent.parent.data.Title}}
5. [UPDATED] You can either pass in the data you want to use, or you can access the view.data inside of the function.

I hope this helps!

<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>
                </div>
            {{/for}}
        </td>
    </tr>
</script>