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

【问题标题】：Aurelia Custom Elements: Access Parent methodAurelia 自定义元素：访问父方法
【发布时间】：2016-12-30 04:48:30
【问题描述】：

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

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

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

【问题讨论】：

几篇可能有帮助的帖子here 和here

标签： aurelia

【解决方案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 的内容实际上是一个函数，然后再尝试调用它。

【讨论】：

感谢您的有效回答。这有帮助。但是，我在app.js 视图模型中还有更多功能，例如add()、edit()、read() 等。我需要为每个人添加一个call 绑定吗？
那时我会重新考虑你的设计。您的组件与父组件的耦合过于紧密，这就是我在您直接调用这么多父方法时所说的。您可能会考虑使用自定义事件。
我明白了。当您说custom events 时，您是指surrogate behaviors 吗？这就是我在文档中搜索 custom events 时首先出现的内容。
至于设计，这不是一个有效的用例吗？我在父视图模型中有一个集合，我想使用custom element 来循环它。但是要添加CRUD 功能，我需要访问父集合，因为custom element's 视图模型对集合一无所知。这有意义吗？
您的自定义元素不需要访问父集合。您的自定义元素只需要触发一个事件，并且父级可以使用trigger 或delegate 订阅该事件。以下是有关自定义事件的信息：developer.mozilla.org/en-US/docs/Web/Guide/Events/… 代理行为与此无关。

【解决方案2】：

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

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

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

像下面的子视图中的代码

this.parent.parentmethod();

【讨论】：

是的，我不得不跳过几个额外的圈overrideContext.parentOverrideContext.bindingContext - 不知道为什么，但这个答案肯定让我走上了正确的道路
我通过bindingContext.router.container.viewModel得到了需要的家长