Javascript 如何访问Aurelia中的嵌套模型？

使用Aurelia，假设我有一个自定义元素

和一个视图/视图模型

InfoPanel

中有一个关闭按钮，该按钮应在

InfoPanel

上执行某些操作，例如调用

close（）

函数

Panel.html

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

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

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

InfoPanel.html

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

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

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

尝试此操作时，会出现以下错误：

未捕获错误：关闭不是一个函数
getFunction@aurelia binding.js:2033
评估@aurelia binding.js:1395
callSource@aurelia binding.js:4842
（匿名函数）@aurelia binding.js:4867
handleDelegatedEvent@aurelia binding.js:2972

---

我的假设是，奥雷莉亚不清楚上下文，或者我遗漏了一些东西…

你试图做的是可能的，但有一些问题-

Panel.html

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

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

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

您需要使用

call

传递函数引用，而不是尝试计算表达式-

InfoPanel.html

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

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

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

---

你想做的是可能的，但有几个问题-

Panel.html

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

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

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

您需要使用

call

传递函数引用，而不是尝试计算表达式-

InfoPanel.html

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

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

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

---

试试“ref”，看这里：谢谢。我不太明白我会如何用它来解决我的问题。你能举个例子来回答吗？试试“ref”，见这里：谢谢。我不太明白我会如何用它来解决我的问题。你能举个例子来回答吗？谢谢，用

call

代替

bind

解决了这个问题。我还通过向我的VM中添加一个自引用属性（

this.VM=this

）并在视图中绑定

close

函数（如

）来修复它，这样

这个

将得到正确的解决--非常混乱！您的解决方案非常有效，谢谢。谢谢，使用

call

而不是

bind

修复了它。我还通过向我的VM中添加一个自引用属性（

this.VM=this

）并在视图中绑定

close

函数（如

）来修复它，这样

这个

将得到正确的解决--非常混乱！您的解决方案非常有效，谢谢。