New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

if.bind both in and outside the custom element causes ref not to be populated when re-binding #327

Open
aqm5181 opened this Issue Oct 19, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@aqm5181

aqm5181 commented Oct 19, 2017

I'm submitting a bug report

  • Library Version:
    1.5.1

Please tell us about your environment:

  • Operating System:
    Windows 10 x64

  • Node Version:
    8.6.0

  • NPM Version:
    5.3.0
  • JSPM OR Webpack AND Version
    Aurelia CLI 0.31.3
  • Browser:
    Chrome 61.0.3163.100

  • Language:
    TypeScript 2.08

Current behavior:

  1. Create project with au new

main.ts

import {Aurelia} from 'aurelia-framework'
import environment from './environment';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin('aurelia-testing');
  }

  aurelia.start().then(() => aurelia.setRoot());
}

app.ts

export class App {
  public toggle = false;
  public elemvisible = true;
}

app.html

<template>
  <require from="./item-details"></require>
  <label>
    <input type="checkbox"
           checked.bind="elemvisible">
    Elem Visible
    <input type="checkbox"
           checked.bind="toggle">
    toggle
  </label>
  <div>
    <div if.bind="toggle">
        <item-details elemvisible.bind="elemvisible"></item-details>
    </div>
  </div>
</template>

item-details.ts

import { bindable } from "aurelia-framework";
import {bindingMode} from "aurelia-binding";

export class ItemDetails {

  @bindable elemvisible: boolean;
  detailsEl: Element;

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

  detached() {
    console.log('detached', this.detailsEl);
  }
}

item-details.html

<template>
  <div if.bind="elemvisible">
    Stuff:
    <div element.ref="detailsEl">Displayed</div>
  </div>
</template>

When toggling the "toggle" checkbox the first time, elDetails in custom element is referenced correctly, however subsequent toggles return null for it. This only happens if there is an if.bind both within the custom element and also in the parent page.

Example: https://gist.run/?id=a981dc20a5cc72439349c02df465ebe7

Similar to issue #298 except for the additional if.bind in the parent page.

Expected/desired behavior:

  • What is the expected behavior?
    Subsequent toggles of "toggle" checkbox should ensure a reference to elDetails in the attached event as long as elemvisible is true.
@adrinr

This comment has been minimized.

Show comment
Hide comment
@adrinr

adrinr Oct 20, 2017

I just entered to report the same issue. I'm having the same behaviour in my application

adrinr commented Oct 20, 2017

I just entered to report the same issue. I'm having the same behaviour in my application

@bigopon

This comment has been minimized.

Show comment
Hide comment
@bigopon

bigopon Jun 20, 2018

Member

@EisenbergEffect This was fixed by #331

Member

bigopon commented Jun 20, 2018

@EisenbergEffect This was fixed by #331

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment