0

I have a custom element hierarchy that looks like select-single <- dropdown <- dropdown-wrapper where each name is a custom element and each arrow represent a template that uses that custom element.

When I use select-single, the attached handler calls selectedChanged() with options set to the bound value, but doSelect is undefined. After the page is displayed, clicking an element in the select-single control fires the click.trigger and both bound properties are valid values.

Is there a rule about Aurelia lifecycles that prevents the doSelect function from being bound, even though options is bound at the same lifecycle step?

select-single.html

<template>
    <div class="select-single"
            if.bind="options.length">        
        <label            
            class="select-single-option"
            repeat.for="option of options"
            click.trigger="selectedChanged(option)">
            ${option.name}
         </label>
    </div>
</template>

select-single.js

import {
    bindable
} from 'aurelia-framework';

@bindable({
    name: 'options',
    defaultValue: []
})

@bindable({
    name: 'doSelect',
    defaultValue: null
})

export class SelectSingle {
    constructor() {
        let self = this;
        this.selectedChanged = function(option) {
            self.doSelect(option);
        }
    }

    attached() {
        for(let ii = 0; ii < this.options.length; ii++){
            if(!!this.options[ii].defaultSelection){
                this.selectedChanged(this.options[ii]);
            }
        }
    }
}

index.html

<select-single options.bind="options" do-select.bind="doSelect"></select-single>
XBigTK13X
  • 2,655
  • 8
  • 30
  • 39
  • 1
    In the `attached` handler, `options` and `doSelect` are bound. You declared the default value of `doSelect` as `null` but you're getting `undefined`, which means that you're binding an `undefined` value to `doSelect`. The problem might in the `index.html`. See that you're doing `do-select="doSelect"` instead of `do-select.bind="doSelect"`; – Fabio Jun 19 '17 at 17:08
  • @FabioLuz Thank you for the advice. Unfortunately, I am now seeing that `doSelect` has a value in the context where it was undefined, but it is the string `"updateSelection"` instead of the function of the same name. – XBigTK13X Jun 19 '17 at 17:33
  • Please, provide the code of `index.js`. – Fabio Jun 19 '17 at 17:47
  • I kept poking around the hierarchy and found the issue. One of the higher elements had a function that was added to the class dynamically inside `attached`. This function is what was being bound to the child component. Moving that function definition into `constructor` resolved the problem. – XBigTK13X Jun 19 '17 at 17:50

0 Answers0