Aureliaでは、カスタム要素から呼び出されるビューモデルを含む私の関数をバインドできますか？

Question

私はユーザー入力を受け取り、[保存]ボタンをクリックすると親ビューモデルに情報を渡し、サーバーに送信して次のセクションに移動できるようにするカスタム要素があります。

my-element.js：

import { customElement, bindable } from 'aurelia-framework'; 

@customElement('my-element') 
@bindable('save') 
export class MyElement { } 

my-element.html：

<template> 
    <button click.delegate="save()">Click this</button> 
</template> 

parent-view-model.js：

export class ParentViewModel { 
    parentProperty = 7; 
    parentMethod() { 
    console.log(`parent property: ${this.parentProperty}`); 
    } 
} 

parent-view-model.html：私は例のためにこれを簡素化するつもりだ

デモのために

<template> 
    <require from="./my-element"></require> 
    <div class="content-panel"> 
     <my-element save.bind="parentMethod"></my-element> 
    </div> 
</template> 

、（app.jsとapp.htmlが親ビュー-model.jsと親ビュー-model.htmlを表す）を参照してください：

https://gist.run/?id=96b203e9ca03b62dfb202626c2202989

それは働きます！やや。残念ながら、thisはparent-view-modelの代わりにmy-elementにバインドされているようです。この例では、コンソールに表示されるのはparent property: undefinedです。それは動作しません。

私はEventAggregatorを利用してカスタム要素とビューモデルの間のコミュニケーションを容易にすることができますが、私がそれを手助けすることができれば、複雑さを避けることができます。

Answer 1

あなたは、この2つのオプションがあります。あなたはカスタムイベントを使ってこれを扱うことができます。あるいは、Anjが彼の答えで述べたcallバインディングを使ってこれを行うことができます。どちらを使用するかは、実際のユースケースによって異なります。

カスタム要素は、この主旨に示すように、あなたはカスタムイベントを使用する必要があり、あなたの親VM上のメソッドを呼び出し、データにカスタム要素のうちを渡すことができるようにしたい場合：https://gist.run/?id=ec8b3b11f4aa4232455605e2ce62872c：

app.html：

<template> 
    <require from="./my-element"></require> 
    <div class="content-panel"> 
     <my-element save.delegate="parentMethod($event)"></my-element> 
    </div> 

    parentProperty = '${parentProperty}' 
</template> 

app.js：

export class App { 
    parentProperty = 7; 
    parentMethod($event) { 
    this.parentProperty = $event.detail; 
    } 
} 

my-element。HTML：

<template> 
    <input type="text" value.bind="eventDetailValue" /> 
    <button click.delegate="save()">Click this</button> 
</template> 

私-element.js：

import { inject, customElement, bindable } from 'aurelia-framework'; 

@customElement('my-element') 
@inject(Element) 
export class MyElement { 
    eventDetailValue = 'Hello'; 

    constructor(element) { 
    this.element = element; 
    } 

    save() { 
    var event = new CustomEvent('save', { 
     detail: this.eventDetailValue, 
     bubbles: true 
    }); 

    this.element.dispatchEvent(event); 
    } 
} 

あなたは基本的にあなたがカスタムイベントのdetail財産を渡すために必要なデータを添付します。イベントバインディング宣言では、関数にパラメータとして$eventを追加し、イベントハンドラの$ eventのdetailプロパティをチェックします（必要ならば、$event.detailに渡すこともできます）。

親VMのメソッドを呼び出して親VM（または別のカスタム要素など）からデータを渡す場合は、callバインディングを使用する必要があります。メソッドに渡される引数は、バインディング宣言（foo.call="myMethod(myProperty)"。これらの引数は、カスタム要素のVMではなく、バインディングが宣言されているVMコンテキストから取得されます）で指定して指定できます。

Answer 2

これは、aurelia docsハブを少し動かした後で解決できました。私は関与する可能性のあるニュアンスをすべて知っていませんが、この単純な例では、次のような簡単な変更を行うことで問題を解決できました：

parent-view-model.htmlしかし、カスタム要素から親ビューモデルのメソッドにデータを渡す方法はまだ分かりません。

Here is the documentation from aurelia website.