Aurelia: accesso alle funzioni personalizzate o agli attributi personalizzati dell'elemento personalizzato

Question

Sto solo giocando con la funzionalità dell'elemento personalizzato in Aurelia e ho provato a creare un elemento "barra di avanzamento".

progressi-bar.js

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

progressi-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 (porzione pertinente)

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

Tutto questo si presenta bene. Ma sto cercando di capire come ottenere che la pagina principale possa chiamare qualche funzione o cambiare qualche attributo sull'elemento, che dovrebbe quindi fare qualcosa sulla barra di avanzamento.

Ho provato a creare una funzione 'doSomething' all'interno di progress-bar.js ma non riesco ad accedervi in ​​test.js.

Aggiunto a Progress-bar.js

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

test.js all'interno

clicked() { 
    console.log(this.pb); // this returns the progress bar element fine 
    console.log(this.pb.doSomething); //this returns as undefined 
    this.pb.doSomething(percent, value); // this fails outright with error: typeError - doSomething is not a function 
} 

Poi ho cercato di impostazione attributi personalizzati all'interno dell'elemento di avanzamento-bar e magari utilizzare valueChange per cambiare il div invece .

All'interno progresso-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 

} 

Nessun problema là, quasi. Ma come posso impostare un gestore da chiamare quando un attributo cambia?

ho trovato un tutorial che ha avuto la seguente sintassi:

@bindable({ 
    name:'myProperty', //name of the property on the class 
    attribute:'my-property', //name of the attribute in HTML 
    changeHandler:'myPropertyChanged', //name of the method to invoke on property changes 
    defaultBindingMode: ONE_WAY, //default binding mode used with the .bind command 
    defaultValue: undefined //default value of the property, if not bound or set in HTML 
}) 

Ma io non riesco a utilizzare quel codice nel mio progresso-bar.js. la pagina non riesce a rendere correttamente dopo aggiungo che nel Gulp non sembra di essere tornati eventuali messaggi di errore, ma i rendimenti console del browser questo errore:.

ERROR [app-router] Router navigation failed, and no previous location could be restored.

Qual è il messaggio che normalmente ottenere quando ho avere qualche errore di sintassi da qualche parte sulle mie pagine.

Ci sono molte cose di cui sono sicuro di qui:

E 'questo il giusto uso di elementi personalizzati? Possiamo creare elementi personalizzati con funzioni al loro interno? Possiamo creare elementi personalizzati con attributi personalizzati che possono quindi innescare eventi quando i suoi valori cambiano?

Ci scusiamo per non aver pubblicato interi codici, poiché ne ho tante variazioni mentre provo cose diverse.

Answer 1

Con Aurelia, è possibile utilizzare questa convenzione nel componente: yourpropertynameChanged()

import {customElement, bindable, inject} from 'aurelia-framework'; 
import $ from '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); 
    } 
} 

Non è necessario per accedere al doSomething() da outsite.
Ma è sufficiente per modificare le proprietà:

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

Answer 2

ho preso un approccio più semplice più pigri e sto usando nprogress, è possibile utilizzare nprogress.set(0.4) ma sto usando il default "qualcosa sta accadendo" comportamento .

import nprogress from 'nprogress'; 
import {bindable, noView} from 'aurelia-framework'; 

@noView 
export class LoadingIndicator { 
    @bindable loading = false; 

    loadingChanged(newValue){ 
    newValue ? 
     nprogress.start() : 
     nprogress.done(); 
    } 
} 

Answer 3

Prima legano un oggetto al vostro elemento personalizzato, ad esempio "config":

<custom-element config.bind="elementConfig"></custom-element> 

poi nel file di pagina js:

someFunction(){ this.elementConfig.elementFunction(); } 

e nel vostro elemento personalizzato aggiungere un funzione come questa:

@bindable({ name: 'config', attribute: 'config', defaultBindingMode: bindingMode.twoWay }); 
export class JbGrid { 
    attached() { 
     this.config.elementFunction = e=> this.calculateSizes(); 
    } 
    calculateSizes() { 
    //your function you want to call 
    } 
} 

Ora hai accesso all'elemento personalizzato "questo" nella tua funzione.