@child() decorator does not work properly in combination with if.bind

[1pmazurek]

I'm submitting a bug report

• Library Version: 1.10.2

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: 10.16.3

• NPM Version: 6.12.0

• JSPM OR Webpack AND Version JSPM 0.16.53

• Browser: all

• Language: all

Current behavior: Let's say we have an app, which uses the component simple-component. This component is placed inside container which is added/removed conditionally. This component uses @child() decorator to reference an input element.

app.html

<template>
    <require from="./simple-component/simple-component"></require>
    <button click.delegate="toggleContainers()">Toggle Containers</button>
    <div class="container-1"
         if.bind="showMainContainer">
        <simple-component>
            <input type="text" id="test-input">
        </simple-component>
    </div>
    <div class="container-2" else>Placeholder container</div>
</template>

app.ts

export class App {
    showMainContainer: boolean = true;

    toggleContainers() {
        this.showMainContainer = !this.showMainContainer;
    }
}

simple-component.html

<template>
    <slot></slot>
    <span>Some Input Suffix</span>
</template>

simple-component.ts

import {child} from 'aurelia-templating';

export class SimpleComponent {
    @child('input') myInput: any;

    attached() {
        console.log('myInput: ', this.myInput);
    }
}

On initial load, reference in myInput property is correct. But if we click "Toggle Containers" button two times (to remove and add cointainer-1 element to the DOM again) then myInput property points to null. I noticed that current behaviour is caused by this commit: https://github.com/aurelia/templating/commit/7989015. In previous versions of this plugin everything worked fine, even in scenario described above.

Expected/desired behavior:

• What is the expected behavior?

Component's property decorated with @child decorator should reference appropriate element even if component's parents are added or removed conditionally.

[bigopon]

This seems to be a bug in .bind() of the the observer, unable to set the value again when .bind() again after .unbind() @mazur33k thanks for reporting this

[bigopon]

fixed by #685