如何访问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. 
    } 
} 

当我尝试，我得到了以下错误：

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

我的假设是，上下文不清楚Aurelia路上，或者我失去了一些东西...

Answer 1

你所要做的是可能的，但也有一些陷阱 -

Panel.html

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

要让panel.html绑定到关闭状态，我们需要默认使其成为匿名函数。我使用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() { 
    } 
}