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

Question

使用Aurelia,我说我有一个自定义元素<panel>和一个视图/视图模型InfoPanel.<panel>有一个关闭按钮,它应该执行一些操作InfoPanel,例如调用该close()功能.

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.
    }
}

当我尝试这个时,我收到以下错误:

未捕获错误:close不是函数
getFunction @ aurelia-binding.js:2033
评估@ aurelia-
binding.js :1395 callSource @ aurelia-binding.js:4842
(匿名函数)@ aurelia-binding.js:4867
handleDelegatedEvent @ aurelia -binding.js:2972

我的假设是Aurelia的背景不清楚,或者我遗漏了一些东西......

Answer 1

你想要做的是可能的,但有一些陷阱 -

Panel.html

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

要使panel.html绑定到close,我们需要默认将它设为匿名函数.我正在使用ES7类实例字段(类属性的长名称),但您可以将装饰器用作类装饰器,只要您正确设置它 -

Panel.js

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

您需要使用call传递函数引用而不是bind尝试评估表达式 -

InfoPanel.html

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

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

InfoPanel.js

export class InfoPanel {
    close() {
    }
}