I am looking to develop a View-Model for the header bar using WebStorm, TypeScript, and Aurelia. In my directory, I have a file named header-bar.html with the following code:
<template bindable="router">
<require from="_controls/clock"></require>
<require from="_controls/language-switcher"></require>
<header class="header" role="banner">
<div class="header-wrapper">
<div class="header-back">
<a href="##" onClick="history.back(); return false;">
<img src="dist/images/01_back_32x32.png">
</a>
</div>
<clock class="header-clock"></clock>
<div class="header-signals">
<img src="dist/images/01_Meldung_64x64.png" alt="Meldung" onclick="$('#notification-window, #cover').show()">
<img src="dist/images/01_Wartung_Montage_kreis_64x64.png" alt="Wartung">
<img src="dist/images/01_Aktoren_Kreis_64x64.png" alt="Aktoren">
<img src="dist/images/01_Lock_64x64.png" alt="Lock">
<img src="dist/images/01_Batterie_fixnav_64x64.png" alt="Batterie">
<language-switcher class="language-switcher"></language-switcher>
</div>
<a href="#" class="header-logo">
<img src="dist/images/fischerlogo300.png" alt="Logo Image">
</a>
</div>
</header>
</template>
Despite having a TypeScript file named header-bar.ts in the same directory with properties like telNumber, hotLineNumber, and emailAddress defined, there seems to be no connection between them. The TypeScript code is as follows:
export class HeaderBar {
public telNumber: string;
public hotLineNumber: string;
public emailAddress: string;
public constructor() {
this.telNumber = "+49999999";
this.hotLineNumber = "01726666";
this.emailAddress = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cffe9fefae5efe9ccf4f4f4a2e8e9">[email protected]</a>";
}
}
I need guidance on how to create a proper View-Model for this header bar. Any assistance would be greatly appreciated.