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

当我尝试这个时，我收到以下错误：

未捕捉错误：关闭不是功能
  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() {
    }
}

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

1 个答案: