Utilisation de setAttribute() sur un attribut personnalisé Aurelia

Question

Est-il possible dans Aurelia d'utiliser vanilla js setAttribute() avec des attributs personnalisés? Lorsque j'inspecte le dom, le changement est fait sur l'élément personnalisé, mais il ne semble pas déclencher quoi que ce soit dans mon modèle ou ma vue, peu importe ce que j'essaie. Existe-t-il une «meilleure pratique» pour ce faire?

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> 

maintenant chargement-circle.ts

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

maintenant chargement-cercle.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

Non, Aurelia ne semble actuellement pas prendre en charge la liaison aux attributs personnalisés.

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

Answer 2

La méthode la plus simple consiste à utiliser la liaison de données. Utilisez color.bind au lieu de définir l'attribut. Si vous définissez explicitement la valeur de l'attribut, alors, selon moi, vous n'utilisez pas Aurelia dans toute son étendue.

Voici ce que vous pouvez faire.

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

Et puis utilisez la color en liaison de données:

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