web-dev-qa-db-ja.com

Aureliaカスタム要素：親メソッドへのアクセス

Aureliaのカスタム要素を使用して、一連のエントリを繰り返しています。ここにサンプルの要点があります： https://Gist.run/?id=38aee85444712​​2f021bc05e1e0de25ae

ここで、カスタム要素で定義されたボタンをクリックしたときにdeleteEntry(entry)メソッドにアクセスする必要があります。 $parent.deleteEntry(entry)を使用してみましたが、機能しません。

見た this 問題ですが、1年以上前のものであり、これを達成するためのよりクリーンな方法があるかどうか疑問に思っています。

aurelia
12
Akshay Khot

これを実現するためにcallバインディングを使用してみませんか？

例を次に示します： https://Gist.run?id=3cc553ea3bd7ed1862d87d8dbe4f5f84

app.html

<template>
    <require from="./entry"></require>

        <h2 class='text-center'>Journal Entries</h2>

        <div>
            <entry repeat.for='entry of entries' entry.bind='entry' delete-function.call="deleteEntry(entry)"></entry>
        </div>

</template>

app.js

export class App {

    entries = [{
          'date': 'Jan 1',
          'note': 'Hello World'
        }, {
          'date': 'Jan 2',
          'note': 'Good Morning'
        }];


    deleteEntry(entry) {
        console.log("Deleting entry");
        console.log(entry);

        const index = this.entries.indexOf(entry);

        this.entries.splice(index, 1);
    }
}

entry.html

<template>
  <div>${entry.date} <button click.trigger='delete()'>X</button></div>

  <div>${entry.note}</div>

</template>

entry.js

import {bindable} from 'aurelia-framework';

export class EntryCustomElement {
    @bindable entry;
    @bindable deleteFunction;

    delete() {
      this.deleteFunction();
    }

}

明らかに、実際の実装では、deleteFunctionにバインドされているものが実際に関数であることを確認してから、呼び出す必要があります。

17
Ashley Grant

バインドライフサイクルイベントを使用すると、Aureliaで親ビューモーダルを取得できます。

bind(bindingContext, overrideContext) {
        this.parent = bindingContext;
    }

これで、親ビューからビューにすべての変数とメソッドにアクセスできます。

子ビューの以下のコードのように

this.parent.parentmethod();
5
Rayudu