If.bind not working properly

1

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

2

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

1 Like
3

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

1 Like
4

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

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.

1 Like
5

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

1 Like
6

Sorry unbind never called

1 Like
7

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

1 Like
8

Sure will try now and let you know

1 Like
9

Unbind need to call explicitly?

1 Like
10

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

1 Like
11

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:

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

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’;

    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;
}

}

1 Like
13

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