javascript - 在每个实例具有不同值的自定义元素上使用 AureliaUX

Question

我正在尝试在 Aurelia CustomElement 的 CSS 文件中使用 AureliaUX 变量。如果每个实例对 CSS 中使用的变量具有相同的值，它会很好地工作，但我不能让它在每次使用自定义元素时都使用不同的值。

自定义元素示例:

// View Model
// box.js
import {inject, bindable} from 'aurelia-framework';
import {AureliaUX} from 'aurelia-ux';

@inject(AureliaUX)
export class Box {
  @bindable color = '#ff0000';

  constructor(ux) {
    this.ux = ux;
  }

  bind() {
    this.setProperty();
  }

  colorChanged() {
    this.setProperty();
  }

  setProperty() {
    this.ux.design.boxColor = this.color;
  }
}

---

<!-- View -->
<!-- box.html -->
<template styles.box>
  <require from="./box.css#ux"></require>
  <div>
    <slot></slot>
  </div>
</template>

---

/* CSS UX File */
/* box.css */
styles.box > div {
  background-color: ${$design.boxColor};
}

在我的应用程序中，我会像这样使用自定义元素:

<template>
    <require from=".../box">
    <box>This box should be red</box>
    <box color="#00ff00">This box should be green</box>
    <box color="#0000ff">This box should be blue</box>
</template>

预期的结果是每个框都有不同的颜色。当前的结果是每个框都获得最后定义的颜色属性的颜色，在这种情况下每个框都是蓝色的。

我怎样才能使颜色属性成为可绑定(bind)属性并特定于每个 Box 实例？

Answer 1

最近对 Aurelia UX 存储库进行了推送，应该在下一个版本中。这会公开样式引擎，这是执行您希望使用 Aurelia UX 执行的操作所需的引擎。

样式引擎获取 CSS 文件并使用特定于组件的作用域变量对其进行处理，而不是使用影响您所体验的所有内容的变量。使用样式引擎，您可以创建如下例所示的元素。

ux-showcase-figure.ts

import {customElement, bindable, ViewResources, View, processAttributes} from 'aurelia-templating';
import {inject} from 'aurelia-dependency-injection';
import {StyleEngine, Themable} from 'aurelia-ux';

@inject(ViewResources, StyleEngine)
@customElement('ux-showcase-figure')
export class UxShowcaseFigure implements Themable {
  @bindable public theme = null;

  public view: View;

  constructor(public resources: ViewResources, private styleEngine: StyleEngine) {}

  public created(_: any, myView: View) {
    this.view = myView;
  }

  public bind() {
    if (this.theme) {
      this.styleEngine.applyTheme(this, this.theme);
    }
  }

  public themeChanged(newValue: any) {
    this.styleEngine.applyTheme(this, newValue);
  }
}

ux 展示图.html

<template styles.showcasefigure>
  <require from="./ux-showcase-figure-theme"></require>

  <slot></slot>
</template>

ux-showcase-theme.ts

import { styles } from 'aurelia-ux';

@styles()
export class UxShowcaseFigureTheme {
  public background: string = '#EEEEEE';
}

ux-showcase-theme.css

styles.showcasefigure {
  background-color: ${background};
  display: flex;
  width: 320px;
  height: 320px;
  position:relative;
  margin-bottom: 20px;
}

styles.showcasefigure > code {
  position: absolute;
  bottom: 16px;
  left: 16px;
}