aurelia中的自定义属性无法正常工作? [英] Custom attribute in aurelia no working?

问题描述

我正在学习Aurelia的工作方式，并试图使一个简单的自定义属性起作用.要做的就是根据某些值的更改来更改div文本的颜色.

I am learning how Aurelia works and I am trying to get a simple custom attribute working. All it will do is change the color of a div text depending on some value changing.

我的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');
  }
}

在我的视图模型中，我有:

In my view model I have :

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事件被触发.

When I change the firstname I do not see the valueChanged event being triggered in the high custom attribute class.

推荐答案

似乎您正在将高级代码导入到视图模型中，而不是视图中.在您的ViewModel中删除此行:

It looks like you are importing the high code in to your viewmodel rather than your view. Remove this line in your ViewModel:

import {high} from './highlightattribute'

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

Then and add this line to your View:

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

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

Next, in the highlightattribute.js file you are removing highlight-yellow and adding highlight-blue, so you will probably want to add and remove the same class. I did also notice that there is a missing parenthesis in your highlightattribute.js file you posted, but that was probably just missed while copying the code.

让我知道这是否有助于解决问题.我已将带有您的代码的示例推送到此处: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src

Let me know if this helps solve the problems. I have pushed a sample with your code to here: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src

这篇关于aurelia中的自定义属性无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！