我正在使用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.
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
}
没有问题,几乎在那里.
但是,如何在属性更改时设置调用处理程序？
我发现一个教程有这样的语法：
@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()
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>
