Aurelia 中的模板与 Class

Question

考虑下面的例子，请注意app-bar.js中的setActive函数。

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

中的 activeTab

这是怎么回事？为什么 DOM 模板是我组件中唯一能够 see/interact 和 activeTab 的部分？我是否在 class 中缺少必要的语法？如果是这样，请提供文档。

我的头在桌子上撞了一会儿，一时兴起，我决定把 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>

app-bar.js

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

app-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!
    }
}

你可能想做这样的事情：

app-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>

Aurelia 中的模板与 Class

Template vs Class in Aurelia

javascript

aurelia