javascript - カスタム要素の Aurelia バインド関数は定義されていませんが、バインドされたデータは定義されていません

Question

select-single <- dropdown <- dropdown-wrapper各名前がカスタム要素であり、各矢印がそのカスタム要素を使用するテンプレートを表しているようなカスタム要素階層があります。

を使用するselect-singleと、attachedハンドラーはバインドされた値に設定して呼び出しますが、selectedChanged()未定義です。ページが表示された後、コントロール内の要素をクリックすると、バインドされた両方のプロパティが有効な値になります。optionsdoSelectselect-singleclick.trigger

同じライフサイクルステップでバインドされているdoSelect場合でも、関数がバインドされないようにする Aurelia ライフサイクルに関するルールはありますか?options

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>