Using setAttribute() on an Aurelia custom attribute

Question

Is it possible in Aurelia to use vanilla js setAttribute() with custom attributes? When I inspect the dom, the change is made on the custom element, but it doesn't seem to trigger anything in my model or view no matter what I try. Is there a "best practice" way to do this?

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>

now-loading-circle.ts

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>

@YoungKyunJin Yes, and when I inspect the dom, the change is made on the custom element, but it doesn't seem to trigger anything in my model or view no matter what I try. — Brian Clark, Aug 23 '17 at 01:33
@YoungKyunJin - I updated the question with my code. `colorChanged` fires once when the page loads but never again. After pressing the button, when I inspect the elements in the browser, `color="green"` but `colorChanged` never fires. — Brian Clark, Aug 23 '17 at 02:44

score 0 · Answer 1 · answered Aug 23 '17 at 03:43

The simplest way to do this is to use data-binding. Use color.bind instead of setting the attribute. If you set the attribute value explicitly, then in my opinion you are not leveraging Aurelia to its full extent.

This is what you can do.

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

And then use the color in data-binding:

<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>

Hope this helps.

I appreciate your response. I am aware of this method but I'm specifically asking whether it is even possible to use `setAttribute()` to update the component. Almost all of the component-style frameworks and libraries have a way to respond `setAttribute()`. I just wanted to know if Aurelia did too. — Brian Clark, Aug 23 '17 at 04:21

score 0 · Accepted Answer · answered Aug 23 '17 at 10:21

0

No, Aurelia currently does not seem to support binding to custom attributes.

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

answered Aug 23 '17 at 10:21

user1304988

232
4
7

Thanks for the response. My question is not about binding to custom attributes. It's about responding to the attributes being changed via `setAttribute` from inside the element which, according to that link, should work. See the 2nd to last response in the link you posted. – Brian Clark Aug 23 '17 at 15:54
I think you are misunderstanding the response in link I gave you. In that example he is manually updating the element attribute to reflect the property change. What you are looking for is the exact opposite, you want the model value to update when the attribute changes, which is currently not possible in Aurelia. There is a distinction between Dom attributes and Node properties, see: https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html – user1304988 Aug 24 '17 at 09:33

Using setAttribute() on an Aurelia custom attribute

2 Answers2