If.bind not working as expected

Help Requests
1

I am trying to conditionally show elements in my HTML depending on a variable that I set in my constructor.

The problem is that it’s showing no matter what I try.

customer.html

<div if.bind="$client === 'Stratosphere'">
                                    <td align="right">
                                        <b>Solar Co. ID:</b>
                                    </td>
                                    <td align="right">
                                        ${reference_no}
                                    </td>
                                </div>

I have also tried show.bind.
I have also tried <div if.bind="client === 'Stratosphere'">

This is how I currently have client defined in my ctor (eventually it will be bound to data gotten from an AJAX call).

customer.js: this.client = '';

What am I missing about how if.binds work?

1 Like
2

It’s a little bit strange to wrap a div around the td’s. Not sure if that’s the issue, but its just not right.
Anyway, you should check carefully. I made a little sandbox for you to compare.

Hope it helps you out.

1 Like
3

Rather than the div:

<template>
  <button class="btn btn-primary" click.trigger="toggle()">Toggle</button>
  <template if.bind="client === 'Stratosphere'">
    <td align="right">
      <b>Solar Co. ID:</b>
    </td>
    <td align="right">
      ${reference_no}
    </td>
  </template>
</template>
1 Like
4

Thank you, that worked perfectly.

I was going off of this article: https://ilikekillnerds.com/2017/12/else-aurelia-using-else-attribute/, which was using <div if.bind="condition">

So to clarify, using the <template> tag is the way to go to use if.bind in my templates? and not the <div> tag?

1 Like
5

As a general rule of thumb, if your HTML conveniently has a container, of if it makes sense to add <section> or <div> as a container, use that.

If you need to wrap if logic or repeat logic around a group of HTML elements without a container, use <template>

5 Likes
6

@rhysshadow The issue here is you’re trying to use a DIV within a table (presumably, I cannot see all of the markup in your code). When it comes to parsing HTML, the browser is strict about what certain elements can have inside of them. For tables, you can’t have DIV’s inside as children.

The <template> element doesn’t get parsed by the browser, it basically ignores it and goes straight to the content and renders that instead. So they make great wrappers for markup. You can also use the as-element which is documented here and in-fact, specifically mentions working with table markup.

In some cases, using if.bind on a DIV is the right way to go if that DIV element is part of your markup. Take Bootstrap as an example.

<div class="container" if.bind="myCondition">
    <div class="row">
        <div class="col-md-6">Content</div>
    </div>
</div>

This would work because it’s valid markup and the browser parses it just fine.

2 Likes
7

Thank you for this explanation. It makes sense now, and I feel like I have a better grasp on which time to use divs vs template tags.

1 Like
8

If I want to use else, how would I do that?

1 Like