如何在Aurelia中访问嵌套模型？

Question

Using Aurelia, say I have a custom element <panel> and a view/view-model InfoPanel . <panel> has a close button in it, which should perform some action on InfoPanel , eg call the close() function.

Panel.html

<template>
    <h1>${headerText}</h1>
    <button click.delegate="close()">x</button>
    <content></content>
</template>

Panel.js

@bindable({name: "headerText"})
@bindable({name: "close"})
export class Panel {
}

InfoPanel.html

<template>
    <require from="./Panel"></require>

    <panel header-text="Info" close.bind="close">
        <!-- content here -->
    </panel>
</template>

InfoPanel.js

export class InfoPanel {
    close() {
        // At this point, "this" referse to the Panel, not the InfoPanel instance.
    }
}

When I try this, I get the following error:

Uncaught Error: close is not a function
getFunction @ aurelia-binding.js:2033
evaluate @ aurelia-binding.js:1395
callSource @ aurelia-binding.js:4842
(anonymous function) @ aurelia-binding.js:4867
handleDelegatedEvent @ aurelia-binding.js:2972

My assumption is that the context is unclear to Aurelia, or I'm missing something...

Answer 1

What you are trying to do is possible but there are a few gotchas -

Panel.html

<template>
    <h1>${headerText}</h1>
    <button click.delegate="close()">x</button>
    <content></content>
</template>

To get panel.html to bind to close we need to make it an anonymous function by default. I am using ES7 class instance fields (a long name for class properties) but you can use the decorator as a class decorator as you are, provided you set it up correctly -

Panel.js

export class Panel {
  @bindable headerText = '';
  @bindable close = () => {};
}

You need to use call to pass a function reference instead of bind which tries to evaluate the expression -

InfoPanel.html

<template>
    <require from="./Panel"></require>

    <panel header-text="Info" close.call="close()">
        <!-- content here -->
    </panel>
</template>

InfoPanel.js

export class InfoPanel {
    close() {
    }
}