How to make an && operator in a JSrender if statement?

Kenci picture Kenci · May 23, 2013 · Viewed 8.2k times · Source

I need the following if statement in a JSRender template:

if (UltimoStr != "0,00" && BudgetStr != "0,00" && ReseveretStr != "0,00")
{
<div class="Posts"></div>  
}

but i can't figure out the syntax.

What i have so far is:

{{if UltimoStr != "0,00"}} and {{BudgetStr != "0,00"}} and {{ReseveretStr != "0,00"}}
<div class="Posts"></div>  
{{/if}} 

which isn't working.

I've been looking at this site for documentation, but it doesnt seem to have multiple and operators:

https://github.com/BorisMoore/jsrender/blob/master/demos/scenarios/02_separators-scenario.html

Answer

Jude Fisher picture Jude Fisher · May 23, 2013

This should work:

{{if UltimoStr != "0,00" && BudgetStr != "0,00" && ReseveretStr != "0,00"}}
    <div class="Posts"></div>  
{{/if}}

Alternatively, you could decorate the object you are binding with a single Boolean that calculates the result of that expression.

A list of operators that work in JsRender can be found here: http://msdn.microsoft.com/en-us/magazine/hh975379.aspx (scroll down to the section titled Expressions).

Here's a simple test:

HTML:

<body>
    <h2>Result</h2>
    <div id="expect-true"></div>
    <div id="expect-false"></div>
</body>

<script id="template" type="text/x-jsrender">
    {{:UltimoStr}}
    {{:BudgetStr }}
    {{:ReseveretStr }}
    {{if UltimoStr != "0,00" && BudgetStr != "0,00" && ReseveretStr != "0,00"}}
        <h1>True!</h1>
    {{else}}
        <h1>False!</h1>
    {{/if}}
</script>

//JS:
$(document).ready(function() {
    var trueData = {
        UltimoStr: "1,00",
        BudgetStr: "1,00",
        ReseveretStr: "1,00"
    };
    $("#expect-true").append($("#template").render(trueData));

    var falseData = {
        UltimoStr: "0,00",
        BudgetStr: "0,00",
        ReseveretStr: "0,00"
    };
    $("#expect-false").append($("#template").render(falseData));
});

Seems to work as expected: http://jsfiddle.net/FJSkh/2/