Шаблон против класса в Aurelia

Question

Рассмотрим следующий пример и обратите внимание на функцию setActive в app-bar.js.

Теперь, как он стоит, если я нажму Home или Plan из app-bar.html, то activeTab свойства в app.js обновляется соответствующим образом. Однако, если я нажму на среднюю кнопку, которая вызывает вышеупомянутую функцию, я получаю следующую ошибку: Uncaught ReferenceError: activeTab is not defined. Более того, если я изменю установщик на 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>