Aurelia:访问Custom Element的自定义函数或自定义属性

Question

我正在玩Aurelia中的自定义元素功能,并试图创建一个'进度条'元素.

进步,bar.js

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

进步,一个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(相关部分)

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

所有这一切都很好.但我正在努力如何让主页可以调用某个函数或更改元素上的某些属性,这应该在进度条本身上做一些事情.

我试图在progress-bar.js中创建一个函数'doSomething',但是我无法在test.js中访问它.

添加到progress-bar.js

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

在test.js里面

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
}

接下来,我尝试在progress-bar元素中设置自定义属性,并可能使用valueChange来改变div.

里面的进度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

}

没问题,几乎就在那里.但是如何在属性更改时设置要调用的处理程序？

我找到了一个有这种语法的教程:

@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
})

但我似乎无法在progress-bar.js中使用该代码.添加后,页面无法正常呈现.Gulp似乎没有返回任何错误消息,但浏览器控制台返回此错误:

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

当我在页面上某处出现语法错误时,通常会收到的消息是什么.

我不确定这里有很多东西:

这是自定义元素的正确用法吗？我们可以创建其中包含函数的自定义元素吗？我们可以使用自定义属性创建自定义元素,然后可以在其值更改时触发事件吗？

抱歉不发布整个代码,因为我在尝试不同的东西时有很多变化.

Answer 1

使用Aurelia,您可以在组件中使用此约定: 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);
    }
}

您无需访问doSomething()外部站点.
但您只需要更改属性:

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