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

我使用Aurelia的自定义元素重复一组条目。这里是示例要点：https://gist.run/?id=38aee854447122f021bc05e1e0de25ae Aurelia自定义元素：访问父级方法

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

看到this问题，但它已超过一年，我想知道是否有一个更清洁的方式来实现这一点。

2016-12-30 akshayKhot

夫妇可能有用的帖子[这里]（http://stackoverflow.com/questions/36813465/passing-the-parent-when-parent-is-the-same-component-type-in-aurelia/36875154 ＃36875154）和[here]（http://stackoverflow.com/questions/32777303/custom-elements-binding-context-what-is-it-exactly-how-to-access-parent-vm/32781324#32781324） –

代码为什么不使用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实际上是试图调用之前的函数。

来源

2016-12-30 18:32:41

感谢您的工作答案。这有帮助。然而，我在'app.js'视图模型中有更多的功能，例如add（），edit（），read（）等等。我需要为每个人添加一个“call”绑定吗？ – akshayKhot

那时我会重新考虑你的设计。你的组件与父组件的绑定方式太紧密了，这就是我在你直接调用许多父母方法时所说的。你可以看看使用自定义事件。 –

我明白了。当你说'自定义事件'时，你的意思是[代理行为]（http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/5）？这是我在搜索文档“自定义事件”时首先弹出的内容。 – akshayKhot

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

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

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

象下面这样子视图

this.parent.parentmethod();

来源

2016-12-30 07:19:07 Rayudu

我不认为这真的有效。 – LStarky

它的工作原理。刚使用过。 – Hardycore

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

回答

相关问题