Aurelia中的模板与类

Question

请考虑以下示例，请注意setActive中的app-bar.js功能。

现在，如果我点击Home中的Plan或app-bar.html，activeTab中的app.js属性会相应更新。但是，如果我单击调用上述功能的中间按钮，则会收到以下错误：Uncaught ReferenceError: activeTab is not defined。此外，如果我将setter更改为this.activeTab = newTab，则不会抛出任何错误，但该值未绑定回activeTab

中的app.js

这里发生了什么？为什么DOM模板是我能够查看/与activeTab交互的组件中唯一的一部分？我在班上缺少必要的语法吗？如果是，请提供文件。

我正在我的桌子上敲我的头一会儿，一时兴起，我决定将activeTab = 'Home'放在click.trigger本身，它神奇地起作用，但我不明白为什么。我不喜欢在模板中更新模型值的想法，所以我想将事件传递给JS并更新模型，但正如我们所看到的，它不起作用。

如果您需要任何其他信息，请与我们联系。

app.js

export class App {
    activeTab = 'Home';
}

app.html

<template>
    <require from="app-bar"></require>
    <h4>ActiveTab via App.js: ${activeTab}</h4>
    <app-bar></app-bar>
</template>

应用-bar.js

export class AppBar {
    setActiveTab(newTab) {
        activeTab = newTab;
    }
}

应用-一个bar.html

<template>
  <button click.trigger="activeTab = 'Home'">Home</button>
  <button click.trigger="setActiveTab('Assess')">Assess</button>
  <button click.trigger="activeTab = 'Plan'">Plan</button>
</template>

Answer 1

问题在于：

export class AppBar {
    setActiveTab(newTab) {
        activeTab = newTab; // <---- what is `activeTab`?  It's not defined anywhere!
    }
}

你可能想做这样的事情：

应用-bar.js

import {bindable, bindingMode} from 'aurelia-framework';

export class AppBar {
    @bindable({ defaultBindingMode: bindingMode.twoWay }) activeTab;

    setActiveTab(newTab) {
        this.activeTab = newTab;
    }
}

<强> app.html

<template>
    <require from="app-bar"></require>
    <h4>ActiveTab via App.js: ${activeTab}</h4>
    <app-bar active-tab.bind="activeTab"></app-bar>
</template>