我想为标题栏创建一个 View 模型。我使用 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) 时,它们之间没有关系。我无法绑定(bind)它们之间的值。例如以下代码 (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";
}
}
您能告诉我,如何为此标题栏创建 View 模型吗?
最佳答案
首先,我删除了.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";
}
}
关于javascript - 如何为标题栏定义 View 模型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44760631/