How to access nested model in Aurelia?

Asked By: Anonymous

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, e.g. 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…


Solution

Answered By: Anonymous

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() {
    }
}
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno