I have a simple model:

var model =  [{
    content: "",
    type: "photo",
    src: "xxx"
}, {
    content: "",
    type: "quote",
    text: "blah"
}];

and a simple template:

{{if type eq='photo'}}
    <img src="{{:src}}" />
    <div class="photo-caption">
        {{:caption}}
    </div>
{{else type eq='quote'}}
    <div class="quote-text">
        {{:text}}
    </div>
{{/if}}

The problem is that the template renders nothing at all when the type is "quote". If I change it slightly to two ifs instead of an if-else, it renders the quote, but also renders the div class="photo-caption">. I need it to only render one or the other. I have a feeling it's a simple matter of syntax, but can't seem to find sufficient docs on how this is done correctly on the JsRender site.

Here's a fiddle. The two templates should behave exactly alike. Instead one renders both, the other renders only the image.

I have a simple model:

var model =  [{
    content: "",
    type: "photo",
    src: "xxx"
}, {
    content: "",
    type: "quote",
    text: "blah"
}];

and a simple template:

{{if type eq='photo'}}
    <img src="{{:src}}" />
    <div class="photo-caption">
        {{:caption}}
    </div>
{{else type eq='quote'}}
    <div class="quote-text">
        {{:text}}
    </div>
{{/if}}

The problem is that the template renders nothing at all when the type is "quote". If I change it slightly to two ifs instead of an if-else, it renders the quote, but also renders the div class="photo-caption">. I need it to only render one or the other. I have a feeling it's a simple matter of syntax, but can't seem to find sufficient docs on how this is done correctly on the JsRender site.

Here's a fiddle. The two templates should behave exactly alike. Instead one renders both, the other renders only the image.

• javascript
• templates
• jsrender

• If you make a jsFiddle, you'll have a much better chance of being helped. – Steve Wellens Commented Jan 15, 2014 at 2:15

2 Answers 2

I got it:

{{if type == 'quote' }}
    <div>
        {{: text }}
    </div>     
{{else type == 'photo'}}   
    <div> 
        {{: src }} 
     </div>   
{{/if}}

http://jsfiddle/4QzZX/2/

When you tried the version with two if statements, did you remember to add a {{/if}} in addition to changing the {{else}} into an {{if}}?

{{if type eq='photo'}}
    <img src="{{:src}}" />
    <div class="photo-caption">
        {{:caption}}
    </div>
{{/if}}
{{if type eq='quote'}}
    <div class="quote-text">
        {{:text}}
    </div>
{{/if}}