10

Aurelia のカスタム要素機能をいじって、「プログレス バー」要素を作成しようとしました。

プログレスバー.js

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

プログレスバー.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 を変更しました。

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.

これは、ページのどこかに構文エラーがある場合に通常受け取るメッセージです。

ここでわからないことがたくさんあります：

これはカスタム要素の正しい使い方ですか? 内部に関数を含むカスタム要素を作成できますか? 値が変更されたときにイベントをトリガーできるカスタム属性を持つカスタム要素を作成できますか?

さまざまなことを試しているときに非常に多くのバリエーションがあるため、コード全体を掲載していないことをお詫びします。

4

3 に答える 3

17

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>
于 2015-07-06T09:43:03.540 に答える
4

私はより単純な怠惰なアプローチを取り、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();
  }
}
于 2015-07-08T10:09:59.950 に答える
1

最初に、「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」にアクセスできるようになりました。

于 2017-04-15T13:14:14.750 に答える