Javascript Aurelia中的模板与类

考虑以下示例，请注意

app bar.js

中的

setActive

函数

现在，如果我从

app bar.html

中单击

Home

或

Plan

，则

app.js

中的

activeTab

属性会相应更新。但是，如果单击调用上述函数的中间按钮，则会收到以下错误：

uncaughtreferenceerror:activeTab未定义

。此外，如果我将setter更改为

this.activeTab=newTab

，则不会抛出任何错误，但该值不会绑定回

app.js中的
activeTab

这是怎么回事？为什么DOM模板是我的组件中唯一一个能够查看或与
activeTab
交互的部分？我在课堂上缺少必要的语法吗？如果是，请提供文件

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

如果您需要任何其他信息，请告诉我

app.js

export class App {
    activeTab = 'Home';
}

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

app.html

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

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

app bar.html

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

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


家
评估
计划

问题在于：

导出类AppBar{
设置活动选项卡（新选项卡）{
activeTab=newTab；//我没有地方来测试这个，但是如果你把它改成
this.activeTab=newTab；
，它会起作用吗？@tcigrand它不会，我在第二段的最后一句中提到过。所以我在这个问题上遇到了困难！好的。看起来你对每个组件的范围都有一些问题。AppBar看不到应用程序中。你应该将应用程序的activeTab值传递给AppBar。你应该能够按照“自定义元素”一节中的说明，了解它们如何将
传递到
SayHello
谢谢，我知道是这样的。而且
应用程序栏
似乎能够从
应用程序
原型继承
activeTab
不必将其定义为组件上的属性-如果我不需要绑定回树，这将很有帮助。如果是这种情况，这与角度范围非常相似，但与React的
this.props.activeTab
概念不同，也就是说，如果我希望绑定回
应用程序
，似乎我需要
活动tab、 绑定
语法（以及类本身中必要的导入）我说的对吗？只是一个跟进-看起来我在没有绑定的情况下继承模板时遇到的问题是一个回归：哦，伙计-我忘了在这里发布更新-我已经由团队运行了你的问题-这肯定是错误，我们正在修复：应该很快发布！