Aurelia:访问Custom Element's的自定义函数或自定义属性
Aurelia: accessing Custom Element's custom functions or custom attributes
我只是在Aurelia中玩自定义元素功能,并试图创建一个"进度条"元素。
progress-bar.js
import {customElement, bindable} from '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(相关部分(
<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);
}
内部测试.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
@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.
当我在页面上的某个地方出现语法错误时,我通常会收到这样的消息。
这里有很多我不确定的地方:
这是自定义元素的正确用途吗?我们可以创建包含函数的自定义元素吗?我们是否可以创建具有自定义属性的自定义元素,然后在其值更改时触发事件?
很抱歉没有发布完整的代码,因为我在尝试不同的东西时有很多不同的代码。
使用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>
我采用了一种更简单的懒惰方法,并且正在使用nprogress,您可以使用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":
<custom-element config.bind="elementConfig"></custom-element>
然后在你的页面js文件中:
someFunction(){ this.elementConfig.elementFunction(); }
在你的自定义元素中添加一个类似这样的函数:
@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
}
}
现在,您可以访问函数中的自定义元素"this"。
- 自定义函数中的光标位置
- Google Sheet自定义函数返回0
- 其中是自定义函数中的属性
- 创建自定义函数以在函数上运行完整的多选下拉列表
- Google Sheets自定义函数条件格式
- 如何使用Angular 1.5组件将属性求值为字符串,这是一个自定义函数
- 调用自调用函数中定义的函数
- 不能在jQuery中定义函数吗?定义
- 未在自定义 OL3 控件的构造函数中定义的原型属性
- 在自执行函数中定义对象的原型
- 如何重用jQuery中的自定义函数来应用多个css属性
- 在匿名自执行函数中定义全局函数
- 使用HTMLElement作为自定义函数原型时的奇怪属性行为
- 从源自标签的onclick属性的自定义函数中调用preventdefault的访问事件
- 修改对象属性,然后在javascript自定义函数中调用函数
- 是否可以在被动初始化之后定义函数和计算属性?
- 带有.data和html5 data属性的jQuery自定义函数
- 自定义函数中聚合物属性未定义
- Aurelia:访问Custom Element's的自定义函数或自定义属性
- JavaScript:路径的自定义函数's”;d”;属性