如何为 header 柱线定义 View-Model？

Question

我想为 header 创建一个 View-Model 栏。我使用 WebStorm + TypeScript + Aurelia。我有一个 header-bar.html 文件，如下所示：

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

当我在相同的目录和相同的名称 (header-bar.ts) 中创建一个 TypeScript 文件 (View-Model) 时，它们之间没有关系。我无法绑定它们之间的值。例如下面的代码（header-bar.ts）：

export class HeaderBar {
  public telNumber: string;
  public hotLineNumber: string;
  public emailAddress: string;
  public constructor() {
    this.telNumber = "+49999999";
    this.hotLineNumber = "01726666";
    this.emailAddress = "service@xxx.de";
  }
}

你能告诉我，如何为这个 header 栏创建一个 View-Model 吗？

Answer 1

首先，我删除了.html:

<require from="header-bar"></require>

但这对我来说还不够。我更改了 header-bar.ts，如下所示：

import {autoinject} from "aurelia-dependency-injection";
import {Router} from "aurelia-router";
import {bindable} from "aurelia-templating";

@autoinject
export class HeaderBar {
  public key: string;

  @bindable
  public router: Router;

  constructor() {
    this.key = "one";
  }
}

如何为 header 柱线定义 View-Model？

How to define a View-Model for header bar?

javascript

webstorm

typescript

aurelia

angular