aurelia 中的自定义属性不起作用？

Question

我正在学习 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 事件 class。

Answer 1

看起来您正在将高级代码导入您的视图模型而不是您的视图。在您的 ViewModel 中删除这一行：

import {high} from './highlightattribute'

然后将这一行添加到您的视图中：

<require from="./highlightattribute"></require>

接下来，在 highlightattribute.js 文件中您将删除 highlight-yellow 并添加 highlight-blue，因此您可能想要添加和删除相同的 class。我还注意到您发布的 highlightattribute.js 文件中缺少括号，但可能是在复制代码时遗漏的。

如果这有助于解决问题，请告诉我。我已将包含您的代码的示例推送到此处：https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src

aurelia 中的自定义属性不起作用？

Custom attribute in aurelia no working?

aurelia