Javascript Aurelia：访问自定义元素'；自定义函数或自定义属性

我只是在玩Aurelia中的自定义元素功能，并尝试创建一个“进度条”元素

progress-bar.js

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

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

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

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>

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

接下来，我尝试在进度条元素中设置自定义属性，可能使用valueChange来更改div

内部progress-bar.js

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

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

@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似乎没有返回任何错误消息，但浏览器控制台返回此错误：

错误[app router]路由器导航失败，无法恢复以前的位置。

当我的页面上出现语法错误时，我通常会收到这个消息

这里有很多我不确定的事情：

这是自定义元素的正确用法吗？ 我们可以创建包含函数的自定义元素吗？ 我们是否可以创建具有自定义属性的自定义元素，从而在其值更改时触发事件

---

很抱歉没有发布完整的代码，因为我在尝试不同的东西时有太多的变体。

使用Aurelia，您可以在组件中使用此约定：

yourpropertynameChanged（）

您不需要从外部访问

doSomething（）

。
但您只需要更改属性：

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

a

我采用了一种更简单的懒惰方法，我使用的是，你可以使用

nprogress.set（0.4）

但是我使用的是默认的“正在发生某些事情”行为

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

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

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

---

首先将一些对象绑定到自定义元素，例如“config”：

然后在页面js文件中：

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

在自定义元素中添加如下函数：

@bindable（{name:'config'，attribute:'config'，defaultBindingMode:bindingMode.twoWay}）；
导出类JbGrid{
附（{
this.config.elementFunction=e=>this.calculateSizes（）；
}
计算（）{
//您要调用的函数
}
}

---

现在，您可以访问函数中的自定义元素“this”。

我找到了它。this.pb指的是进度条元素。其中是progressBar类的progressBar对象。因此，要访问自定义元素类中的函数，它是this.pb.progressBar，属性也是如此。如果您已经回答了您的问题，您可以发布您的实际解决方案，然后将其标记为答案吗？谢谢，这就是我最后得到的结果。