在 Aurelia 自定义属性上使用 setAttribute()

Question

在 Aurelia 中是否可以使用带有自定义属性的 vanilla js setAttribute()？当我检查 dom 时，更改是在自定义元素上进行的，但无论我尝试什么，它似乎都不会触发我的模型或视图中的任何内容。有 "best practice" 的方法吗？

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>

正在加载-circle.ts

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

正在加载-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

在 Aurelia 自定义属性上使用 setAttribute()

Using setAttribute() on an Aurelia custom attribute

javascript

aurelia