在Aurelia自定義屬性上使用setAttribute（）

Question

在Aurelia中是否可以將Vanilla js setAttribute()與自定義屬性一起使用？ 當我檢查dom時，更改是在custom元素上進行的，但是無論我嘗試什么，它似乎都不會觸發模型中的任何內容或視圖。 是否有“最佳實踐”方法來做到這一點？

home.ts

export class Home{
    public onButtonClicked():void{
        document.getElementById('test123').setAttribute('color', 'green');
    }
}

home.html

<template>
    <require from="../../elements/now-loading-circle/now-loading-circle"></require>
    <button click.delegate="onButtonClicked()">Click</button>
    <now-loading-circle id="test123" color="red"></now-loading-circle>
</template>

現在加載圈子

import {bindable, autoinject} from 'aurelia-framework';
@autoinject
export class NowLoadingCircle{
    @bindable color:string;
    public colorChanged(newValue):void{
        alert(newValue);
    }
}

now-loading-circle.html

<template>
    <svg viewBox="0 0 120 120">
        <circle repeat.for="circ of coords" cx="${circ.x}" cy="${circ.y}" r="${smallCircleRadius}" class="circ-${$index + 1}"></circle>
    </svg>
</template>

Answer 1

最簡單的方法是使用數據綁定。 使用color.bind而不是設置屬性。 如果您明確設置屬性值，那么我認為您沒有充分利用Aurelia。

這就是您可以做的。

export class Home{
    color: string; // have a member in Home.
    public onButtonClicked():void{
        this.color = 'green';
    }
}

然后在數據綁定中使用color ：

<template>
    <require from="../../elements/now-loading-circle/now-loading-circle"></require>
    <button click.delegate="onButtonClicked()">Click</button>
    <now-loading-circle id="test123" color.bind="color"></now-loading-circle>
</template>

希望這可以幫助。

Answer 2

不，Aurelia當前似乎不支持綁定到自定義屬性。

https://github.com/aurelia/binding/issues/380