在自定義元素上爲每個實例使用不同值的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> 

釷預期的結果是每個盒子都有不同的顏色。當前的結果是每個框都獲得最後定義的顏色屬性的顏色，在這種情況下，每個框都是藍色的。

我該怎麼做才能讓顏色屬性是一個可綁定的屬性，並且針對每個Box實例？

Answer 1

近期推出了應該在下一個版本中發佈的Aurelia UX回購版。這暴露了風格引擎，這是您要用Aurelia UX做什麼需要做的事情。

樣式引擎是採用CSS文件並使用特定於組件的作用域變量處理它，而不是影響整個板上所有內容的變量。使用樣式引擎可以創建如下例所示的元素。

UX-展示-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展示figure.html

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

    <slot></slot> 
</template> 

UX-展示-theme.ts

import { styles } from 'aurelia-ux'; 

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

UX-展示主題。 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; 
}