Question

我正在使用Aurelia的自定义元素来重复一组条目。以下是示例要点：https://gist.run/?id=38aee854447122f021bc05e1e0de25ae

现在，我需要在单击custom元素中定义的按钮时访问deleteEntry(entry)方法。我尝试使用$parent.deleteEntry(entry)，但它无效。

看到this问题，但它已经超过一年了，我想知道现在是否有更清洁的方法来实现这一目标。

Answer 1

为什么不使用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的内容在尝试调用之前实际上是一个函数。

Answer 2

使用绑定生命周期事件，您可以在Aurelia中获取父视图模式。

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

现在，您可以从父视图访问视图中的所有变量和方法。

与子视图中的以下代码一样

this.parent.parentmethod();

Aurelia自定义元素：访问父方法

2 个答案: