我正在学习 Aurelia 的工作原理,并且正在尝试让一个简单的自定义属性正常工作。它所做的只是根据某些值的变化来改变 div 文本的颜色。
我有一个 div,其中包含:
high.bind="changeColor"
在我的属性中我有:
import {inject, customAttribute} from 'aurelia-framework';
@customAttribute('high')
@inject(Element)
export class High {
constructor(element) {
this.element = element;
}
valueChanged(newValue){
console.log(newValue);
if (newValue) {
this.element.classList.remove('highlight-yellow');
} else {
this.element.classList.add('highlight-blue');
}
}
在我的视图模型中,我有:
import {high} from './highlightattribute'
export class Welcome{
heading = 'Welcome to the Aurelia Navigation App!';
firstName = 'John';
lastName = 'Doe';
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
get changeColor(){
if (this.firstName == 'John'){
return false;
}
return true;
}
welcome(){
alert(`Welcome, ${this.fullName}!`);
}
}
当我更改名字时,我没有看到在高级自定义属性类中触发 valueChanged 事件。
看起来您正在将高代码导入到视图模型而不是视图中。在 ViewModel 中删除这一行:
import {high} from './highlightattribute'
然后将此行添加到您的视图中:
<require from="./highlightattribute"></require>
接下来,在highlightattribute.js
您要删除的文件highlight-yellow
并添加highlight-blue
,因此您可能想要添加和删除同一个类。我还注意到您的中缺少括号highlightattribute.js
您发布的文件,但这可能只是在复制代码时丢失的。
让我知道这是否有助于解决问题。我已将包含您的代码的示例推送到此处:https://github.com/AshleyGrant/sculpture-navigation/tree/so-answer-20150416-01/src https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)