# If.bind not working as expected

**URL:** https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510
**Category:** Help Requests
**Created:** [May 23, 2020, 6:31pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510 "2020-05-23T18:31:37Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)
#### Post date: [May 23, 2020, 6:31pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/1 "2020-05-23T18:31:38Z")

</div>

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

```auto
<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?

---

<div class="post-metadata">

### Author: ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)
#### Post date: [May 23, 2020, 9:23pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/2 "2020-05-23T21:23:22Z")

</div>

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.

> **[aurelia-dynamic-css - CodeSandbox](https://codesandbox.io/s/aurelia-dynamic-css-nuvpx?file=%2Fapp.html)**
>
> A basic template for Aurelia +Dialog without bundler / compiler

Hope it helps you out.

---

<div class="post-metadata">

### Author: ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)
#### Post date: [May 23, 2020, 9:37pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/3 "2020-05-23T21:37:33Z")

</div>

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>
```

---

<div class="post-metadata">

### Author: ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)
#### Post date: [May 24, 2020, 3:32pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/4 "2020-05-24T15:32:08Z")

</div>

Thank you, that worked perfectly.

I was going off of this article: [https://ilikekillnerds.com/2017/12/else-aurelia-using-else-attribute/](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?

---

<div class="post-metadata">

### Author: ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)
#### Post date: [May 24, 2020, 3:39pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/5 "2020-05-24T15:39:05Z")

</div>

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>`

---

<div class="post-metadata">

### Author: ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)
#### Post date: [May 27, 2020, 12:00am UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/6 "2020-05-27T00:00:26Z")

</div>

@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](https://aurelia.io/docs/templating/basics#the-as-element-attribute) 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.

```auto
<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.

---

<div class="post-metadata">

### Author: ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)
#### Post date: [May 27, 2020, 3:01pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/7 "2020-05-27T15:01:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)
#### Post date: [May 27, 2020, 4:32pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-as-expected/3510/8 "2020-05-27T16:32:24Z")

</div>

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