在Aurelia自定义属性上使用setAttribute（）

Question

在Aurelia中可以使用具有自定义属性的vanilla js setAttribute()吗？当我检查dom时，更改是在自定义元素上进行的，但无论我尝试什么，它都不会在我的模型或视图中触发任何内容。有没有一种“最佳实践”的方式来做到这一点？

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

不，Aurelia目前似乎不支持绑定到自定义属性。

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

Answer 2

最简单的方法是使用数据绑定。使用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> 

希望这有助于。