# If.bind not working properly

**URL:** <https://discourse.aurelia.io/t/if-bind-not-working-properly/3535>\
**Category:** Uncategorized\
**Created:** [June 1, 2020, 1:46pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535 "2020-06-01T13:46:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 1, 2020, 1:46pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/1 "2020-06-01T13:46:51Z")

</div>

HI I have summary view. IN that I have edit button. WHen I click edit button, based on if.bind I am rendering another view.

But that only works for the first time.

Second time its not working eventhough edit mode is true.

PLease see my below code

```
<saas-encounter-detail if.bind="isEditMode" encounter-detail.bind="encounterDetail" containerless></saas-encounter-detail>

```

Kindly help. Or Suggest alternate option. Immediate response would help

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [June 1, 2020, 5:16pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/2 "2020-06-01T17:16:42Z")

</div>

In my experience this is usually caused by bad markup or errors thrown within your components. Keep an eye out at your log console and in addition, hook into bind/attached and unbind/detached in saas-encounter-detail and log something to the console. Make sure that these methods are being called when you expect them to be called and if not, that helps in narrowing down the issue.

Alternatively you can use `show.bind` to simply reuse 1 instance and have its visibility toggled. Another trick is to try and force the container to invalidate, something like:  
`<template repeat.for="state of [isEditMode]"><saas-encounter-detail if.bind="isEditMode></template>`

These workarounds are useful in case you don’t own the component in question but should never be preferred

---

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 1, 2020, 6:33pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/3 "2020-06-01T18:33:35Z")

</div>

How can I hook bind or unbind explicitly? Can you please give more info.

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [June 1, 2020, 6:44pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/4 "2020-06-01T18:44:12Z")

</div>

What I mean is within your saas-encounter-detail viewmodel, add

```auto
bind() { console.log("Binding for sure!"); }
unbind() { console.log("Unbinding..."); }

```

that way you can at least observe whether bind/unbind is getting invoked whenever isEditMode changes.

---

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 1, 2020, 7:14pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/5 "2020-06-01T19:14:39Z")

</div>

I tried that as well. Only first time called. Not next time

---

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 1, 2020, 7:28pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/6 "2020-06-01T19:28:04Z")

</div>

Sorry unbind never called

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [June 1, 2020, 7:32pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/7 "2020-06-01T19:32:33Z")

</div>

Well, unbind should get called when isEditMode changes to false, so next up would be to verify that, you could use the aurelia browser extension which works great for this purpose or simply throw a `<h1>Edit mode: ${isEditMode}</h1> ` in there. If that seems to work correctly then you might be hitting a separate issue and a repo would be welcome

---

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 1, 2020, 7:44pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/8 "2020-06-01T19:44:57Z")

</div>

Sure will try now and let you know

---

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 1, 2020, 8:09pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/9 "2020-06-01T20:09:35Z")

</div>

Unbind need to call explicitly?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [June 2, 2020, 7:36pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/10 "2020-06-02T19:36:25Z")

</div>

Your saas-encounter-detail is rendered containerless. Can you try to nest it inside a div and move the if.bind to that div?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 2, 2020, 9:57pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/11 "2020-06-02T21:57:18Z")

</div>

unbind is not needed to be called explicitly. Im not sure how your actual code looks like, but keep in mind that if view is cached. So that constructor of `<sass-counter-detail/>` will only be called once. `bind/unbind` will be called repeatedly as the value of `[if]` changes.

If you don’t wanna cache the view of `[if]` attribute, then you can do:

```auto
<saas-encounter-detail if="condition.bind: isEditMode; cache: false" encounter-detail.bind="encounterDetail" containerless></saas-encounter-detail>

```

---

<div class="post-metadata">

**Author:** ![prempalani](https://avatars.discourse-cdn.com/v4/letter/p/858c86/32.png) [@prempalani](https://discourse.aurelia.io/u/prempalani)\
**Post date:** [June 3, 2020, 1:02pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/12 "2020-06-03T13:02:48Z")

</div>

I fixed that issue. Thanks.

Now am getting another issue. Please find my below issue details

Hi ,

Not able get routes even though added routes in app.js.  
I am using below code to navigate to route. But getting error saying no route available.

this.router.navigateToRoute(‘Summary’, { replace: true, trigger: true });

app.js code:

import { inject } from ‘aurelia-framework’;

@inject(Element)  
export class App {  
constructor(element) {  
debugger  
this.element = element;  
this.Id = null;  
this.message = ‘App’;  
if (element)  
this.Id = element.dataset[‘id’];  
}  
configureRouter(config, router) {  
config.title = ‘App’;

```auto
    config.map([
        {
            route: 'Summary',
            name: 'Summary',
            moduleId: '../src/summary-control',
            nav: true
        },
        {
            route: 'Detail',
            name: 'Detail',
            moduleId:'../src/detail-control',
            nav: true,
            title: 'Details'
        },
    ]);
    this.router = router;
}

```

}

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [June 3, 2020, 10:49pm UTC](https://discourse.aurelia.io/t/if-bind-not-working-properly/3535/13 "2020-06-03T22:49:18Z")

</div>

I’ve answered in that thread. let’s continue the discussion there 🙂