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

在Aurelia中可以使用具有自定義屬性的vanilla js setAttribute()嗎？當我檢查dom時，更改是在自定義元素上進行的，但無論我嘗試什麼，它都不會在我的模型或視圖中觸發任何內容。有沒有一種「最佳實踐」的方式來做到這一點？在Aurelia自定義屬性上使用setAttribute（）

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>

來源

2017-08-23 Brian Clark

你嘗試使用的setAttribute（）？它怎麼樣？ – zynkn

@YoungKyunJin是的，當我檢查dom時，更改是在自定義元素上進行的，但無論我嘗試什麼，它都不會在我的模型或視圖中觸發任何內容。 –

我可以看到你的代碼嗎？ – zynkn

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

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

來源

2017-08-23 10:21:38 user1304988

感謝您的回覆。我的問題不是綁定到自定義屬性。這是關於通過元素內部的'setAttribute'響應屬性，根據該鏈接，該屬性應該工作。查看您發佈的鏈接中的第二到最後一個回覆。 –

我認爲你誤解了我給你的鏈接中的回覆。在那個例子中，他手動更新元素屬性以反映屬性更改。你正在尋找的是完全相反的，你希望模型值在屬性改變時更新，這在Aurelia目前是不可能的。 Dom屬性和Node屬性之間有區別，請參閱：https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html – user1304988

最簡單的方法是使用數據綁定。使用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>

希望這有助於。

來源

2017-08-23 03:43:01

我很感謝您的迴應。我知道這種方法，但我特別問是否甚至可以使用'setAttribute（）'來更新組件。幾乎所有的組件式框架和庫都可以響應'setAttribute（）'。我只是想知道Aurelia是否也有。 –

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

回答

相關問題