Question

查看

<template>
  <div single-value-attrib="${color}"></div>
  <div single-value-attrib.bind="color"></div>
  <input type="text" value.bind="color" />
</template>

视图模型

export class SingleValueAttribCustomAttribute {
  static inject = [Element];
  color = 'orange';
  constructor(element) {

    this.element = element;
    this.element.style.width = this.element.style.height = '100px';
  }

  bind() {
    this.element.style.backgroundColor = this.value;
  }

  valueChanged(newValue, oldValue) {
    this.element.style.backgroundColor = newValue;
  }
}

我原以为viewModel中的color='orange';会映射到视图上的颜色，因此将默认颜色设置为橙色。更改输入框中的颜色按预期工作。我知道您可以将this.value设置为默认颜色但我只是认为绑定的工作方式与skeleton-nav中的相同，其中输入框具有firstName和lastName的默认值

Answer 1

首先，请注意this.color并未在代码视图模型中的任何位置使用，因此设置它实际上并不会在代码中执行任何操作。

经过一番游戏，我确定在这种特定情况下你最好的选择是在构造函数中设置背景颜色并摆脱bind函数。我在这里创建了一个gist.run：https://gist.run/?id=a15e0305f082f6ef080364caff2a1ec1

以下是自定义属性的VM：

export class SingleValueAttribCustomAttribute {
  static inject = [Element];
  defaultColor = 'orange';
  constructor(element) {

    this.element = element;
    this.element.style.width = this.element.style.height = '100px';
    this.element.style.backgroundColor = this.defaultColor; 
  }

  valueChanged(color) {
    if(color.trim() !== '') {
      this.element.style.backgroundColor = color;
    }
  }
}

根据您的使用情况，您可能希望删除color中valueChanged上空字符串的检查。

使用Aurelia，如何为自定义属性设置默认值

1 个答案: