Template7 issues

Questions
1

Good day,

Please, I am having some challenges with the template below. Can anyone assist to identify what I am doing wrong? I am trying to do selective templates.

Thanks in advance

<script id="streamTmpl" type="text/template7">
    {{#each data}}
    {{#js_if "this.Subject === 'User Security'"}}
    <div class="card facebook-card">
        <div class="card-header no-border">
            <div class="facebook-avatar">
                <img src="images/medal.png">
            </div>
            <div class="facebook-name">{{Description}}</div>
            <div class="facebook-date">Earned on Monday at 3:47 PM</div>
        </div>
    </div>
    {{/js_if}}

    {{#js_if "this.Subject === 'Transport'"}}
    <div class="card facebook-card">
        <div class="card-header no-border">
            <div class="facebook-avatar">
                <img src="images/medal.png">
            </div>
            <div class="facebook-name">{{Description}}</div>
            <div class="facebook-date">Earned on Monday at 3:47 PM</div>
        </div>
    </div>
    {{/js_if}}
    {{#js_if "this.Subject === 'Attendance'"}}
    <div class="card facebook-card">
        <div class="card-header no-border">
            <div class="facebook-avatar">
                <img src="images/medal.png">
            </div>
            <div class="facebook-name">{{Description}}</div>
            <div class="facebook-date">Earned on Monday at 3:47 PM</div>
        </div>
    </div>
    {{/js_if}}
    {{#js_if "this.Subject === 'Incident'"}}
    <div class="card facebook-card">
        <div class="card-header no-border">
            <div class="facebook-avatar">
                <img src="images/medal.png">
            </div>
            <div class="facebook-name">{{Description}}</div>
            <div class="facebook-date">Earned on Monday at 3:47 PM</div>
        </div>
    </div>
    {{/js_if}}
    {{#js_if "this.Subject === 'Notification'"}}
    <div class="card facebook-card">
        <div class="card-header no-border">
            <div class="facebook-avatar">
                <img src="images/medal.png">
            </div>
            <div class="facebook-name">{{Description}}</div>
            <div class="facebook-date">Earned on Monday at 3:47 PM</div>
        </div>
    </div>
    {{/js_if}}
    {{#if ImageUrl}}
    <div class="card facebook-card">
        <div class="card-header no-border">
            <div class="facebook-avatar"><img src="images/profile.jpg" style="border-radius:50%" width="34" height="34"></div>
            <div class="facebook-name">Mrs Oloyede</div>
            <div class="facebook-date">Head Teacher on Monday at 3:47 PM</div>
        </div>
        <div class="card-content">
            <div class="card-content-inner">
                <p>What a nice photo i took yesterday!</p>
                <img src="images/bg1.jpg" width="100%" height="80%">
            </div>
        </div>
        <div class="card-footer no-border">
            <a href="#" class="link">Like</a>
            <a href="#" class="link">Comment</a>
            <a href="#" class="link">Share</a>
        </div>
    </div>
    {{/if}}
    {{/each}}
</script>
2

What error you have in the console?

3

Hi,

Thanks for you quick question. I was able to make it work but the issue that I have now is, I am binding a list of items to this and it is not doing selective rendering. What I mean by this is , can I do nested if …Else if… ?

And how can I ?