我有一个对话框,你可以在这里看到:
<template>
<ux-dialog>
<ux-dialog-body>
<h2 t="luminaires.list.enter-serialnumber">Bitte geben Sie eine neue Seriennummer ein</h2>
<input value.bind="serialNumber" />
</ux-dialog-body>
<ux-dialog-footer>
<button click.trigger="controller.cancel()" t="luminaires.list.cancel">Abbrechen</button>
<button click.trigger="controller.ok(serialNumber)" t="luminaires.list.ok">Ok</button>
</ux-dialog-footer>
</ux-dialog>
</template>
和相关的视图模型:
import {DialogController} from "aurelia-dialog";
import {Controller} from "aurelia-templating";
export class SerialnumberDialog {
private static inject = [DialogController];
private serialNumber: string;
private controller: any;
constructor(controller: Controller) {
this.controller = controller;
}
}
我想有时改变以下句子的颜色。
<h2 t="luminaires.list.enter-serialnumber">Bitte geben Sie eine neue Seriennummer ein</h2>
例如,当某个机构提供重复的序列号时,我想将颜色更改为红色。我可以通过以下代码打开对话框:
this.dialogService.open({ viewModel: SerialnumberDialog, lock: false })
.whenClosed((response) => {......
我想为此目的使用Aurelia概念。你能告诉我解决方案吗?
答案 0 :(得分:2)
我会在css.bind
元素上使用<h2>
方法。我会在您的视图模型上创建一个方法,以便能够决定是否要将文本设置为红色,然后将样式存储在css变量中。
import {DialogController} from "aurelia-dialog";
import {Controller} from "aurelia-templating";
export class SerialnumberDialog {
private static inject = [DialogController];
private serialNumber: string;
private controller: any;
constructor(controller: Controller) {
this.controller = controller;
this.myCss = {
color: 'black'
};
}
activate(){
if(//serial number is repetitious){
this.myCss.color = red;
}
}
}
现在你有了一个myCss对象,可以绑定到你的视图来改变文本的颜色。
<h2 t="luminaires.list.enter-serialnumber" css.bind="myCss">
Bitte geben Sie eine neue Seriennummer ein
</h2>
如果您想了解更多信息,Dwayne Charrington会在他的ILikeKillNerds博客https://ilikekillnerds.com/2016/02/binding-with-style-in-aurelia/上发表关于CSS绑定的精彩文章。