В Aurelia я могу связать функцию из моей содержащей модели вида, которую должен вызвать мой пользовательский элемент?

Question

У меня есть пользовательский элемент, который будет принимать пользовательский ввод, а при нажатии кнопки [save] я хочу передать информацию родительской модели представления, чтобы я мог отправить ее на сервер и перейти к следующему разделу. Я собираюсь упростить это, например в целях:

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 представляет родительский-View-model.js и родительский-View-model.html):

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

Это работает! Вид. К сожалению, , по-видимому, привязан к my-element вместо parent-view-model, поэтому в этом примере то, что напечатано на консоли, является: parent property: undefined. Это не будет работать.

Я знаю, что могу использовать EventAggregator для облегчения связи между настраиваемым элементом и моделью просмотра, но если я могу помочь, я бы хотел избежать дополнительной сложности.

Answer 1

У вас есть два варианта для этого. Вы можете обработать это с помощью пользовательских событий, или вы можете сделать это, используя привязку 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; 
    } 
} 

мой-элемент.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, если хотите).

Если вы хотите, чтобы пользовательский элемент мог вызвать метод на вашей родительской виртуальной машине и передать данные из родительской виртуальной машины (или из другого настраиваемого элемента или чего-то еще), то вы должны использовать привязку call. Вы можете указать аргументы, которые будут переданы методу, указав их в объявлении привязки (foo.call="myMethod(myProperty)". Эти аргументы исходят из контекста VM, в котором объявляется привязка, а не из виртуальной машины Custom Element).

Answer 2

Я смог решить это после троллинга через концентратор документов aurelia. Я не знаю всех нюансов, которые могут быть задействованы, но для этого простого примера я смог исправить это, выполнив следующие простые изменения:

В parent-view-model.html (или app.html в пример использования), изменить save.bind="parentMethod" на save.call="parentMethod()"

Я все еще не уверен, как передавать данные из пользовательского элемента в метод родительского представления.

Here is the documentation from aurelia website.