jsrender if-else using {{=propName}}

Question

I'm trying out jsRender.

What I want to do:

JS template:

<script id="theaterTemplate" type="text/x-jquery-tmpl">
    {{* 
        if ("{{=theaterId}}" == getCurrentTheaterId()) {
    }}
        <a class="active" href="#">
    {{*
        } else {
    }}         
        <a href="#">           
    {{* } }}
        {{=theaterName}}
    </a>
</script>

In other JS:

function getCurrentTheaterId() {
    return "523";
}

Basically, in the template, if the current theater id in iteration matches what's returned from the js function, then set the class to active. The "{{=theaterId}}" breaks in the if condition. I guess you're not allowed to access current json properties in the if condition.

Any ideas on how to do this?

Hopefully that makes sense. Thanks!

Distaste

Answer 1

In their sample program they have this:

$.views.allowCode = true;/

http://borismoore.github.com/jsrender/demos/step-by-step/11_allow-code.html

[Edit]

You have to 'tell' jsRender about the external function. Here's a working example:

   <script type="text/javascript">
        function IsSpecialYear()
        {
             return '1998';
        }

        // tell jsRender about our function
        $.views.registerHelpers({ HlpIsSpecialYear: IsSpecialYear });

    </script>

    <script id="movieTemplate" type= "text/html">

        {{#if ReleaseYear == $ctx.HlpIsSpecialYear() }}
            <div style="background-color:Blue;">
        {{else}}
            <div>
        {{/if}}   
            {{=$itemNumber}}: <b>{{=Name}}</b> ({{=ReleaseYear}})
        </div>

    </script>

    <div id="movieList"></div>

<script type="text/javascript">

    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];

    $.views.allowCode = true;

    $("#movieList").html(
        $("#movieTemplate").render(movies)
    );

</script>   

[EDIT 2] A more complicated boolean condition:

    function IsSpecialYear(Year, Index)
    {
        if ((Year == '1998') && (Index == 1))
            return true;
        else
            return false;
    }

    // tell jsRender about our function
    $.views.registerHelpers({ HlpIsSpecialYear: IsSpecialYear });

</script>

<script id="movieTemplate" type= "text/html">

{{#if $ctx.HlpIsSpecialYear(ReleaseYear, $itemNumber)  }}
    <div style="background-color:Blue;">
{{else}}
    <div>
{{/if}}

British

Thanks Steve. From my description, the {{=theaterId}} in the if condition is the part that breaks, not the function part. Thanks tho. – Distaste

I might try it your way tho, with just doing {{#if vs. doing my original {{* if... – Distaste

I definitely like your way better! Do you know if it's possible to do {{#if ReleaseYear == $ctx.HlpIsSpecialYear() && $itemNumber == 1 }} ? I haven't had luck yet with doing "&&" or "||" in the #if condition. Thanks so much!!! – Distaste

Answer 2

&& was not supported until a recent beta candidate became available. The amount of logic you could do declaratively in the template was limited, and did not include && or ||. However the support for comparison operators is now very complete. There are some examples here: http://borismoore.github.com/jsrender/demos/step-by-step/10_comparison-tests.html

Johm

FYI: Boris Moore is the author of jsRender and jsViews! – British