javascript - Aurelia: accessing Custom Element's custom functions or custom attributes -

i'm playing around custom element functionality in aurelia , tried create 'progress bar' element.

progress-bar.js

import {customelement, bindable} 'aurelia-framework'; @customelement('progress-bar') export class progressbar { //do stuff// } 

progress-bar.html

<template>   <link rel="stylesheet" type="text/css" href="src/components/progress-bar.css">   <div class='progress-bar' tabindex=0 ref="bar">bloo</div> </template> 

test.html (relevant portion)

  <require from="./components/progress-bar"></require>   <progress-bar ref="pb">a</progress-bar> 

all of shows fine. i'm struggling on how main page can call function or change attribute on element, should in term on progress bar itself.

i tried create function 'dosomething' inside progress-bar.js can't access in test.js.

added progress-bar.js

dosomething(percent, value) {   $(this.bar).animate('width: ${percent}%', speed); } 

inside test.js

clicked() {    console.log(this.pb); // returns progress bar element fine    console.log(this.pb.dosomething); //this returns undefined    this.pb.dosomething(percent, value); // fails outright error: typeerror - dosomething not function } 

next tried setup custom attributes inside progress-bar element , maybe use valuechange change div instead.

inside progress-bar.js

@bindable percent=null; @bindable speed=null; 

test.js

clicked() { this.pb.percent=50; //this updated fine this.pb.speed=1500; //this updated fine  } 

no problem there, there. how set handler call when attribute changes?

i found tutorial had syntax:

@bindable({   name:'myproperty', //name of property on class   attribute:'my-property', //name of attribute in html   changehandler:'mypropertychanged', //name of method invoke on property changes   defaultbindingmode: one_way, //default binding mode used .bind command   defaultvalue: undefined //default value of property, if not bound or set in html }) 

but can't seem use code in progress-bar.js. page fails render after add in. gulp doesn't seem have returned error messages browser console returns error:

error [app-router] router navigation failed, , no previous location restored.

which message when have syntax error somewhere on pages.

there many things i'm unsure of here:

is right use custom elements? can create custom elements functions inside them? can create custom elements custom attributes can trigger events when values change?

apologies not posting entire codes, have many variations of while trying out different things.

with aurelia, can use convention in component : yourpropertynamechanged()

import {customelement, bindable, inject} 'aurelia-framework'; import $ 'jquery';  @customelement('progress-bar') @inject(element)  export class progressbar {     @bindable percent;     @bindable speed;      constructor(element){         this.element = element;     }      percentchanged(){         dosomething(this.percent, this.speed);     }      speedchanged(){         dosomething(this.percent, this.speed);     }      dosomething(percent, value) {         $(this.element).animate('width: ${percent}%', value);     } } 

you don't need access dosomething() outsite.
need change properties:

<progress-bar percent="${pb.percent}" speed="${pb.speed}">a</progress-bar>