Передача действия компоненту с контекстом родителя в Aurelia

Question

Как передать действие из родительского представления/компонента в дочерний компонент и по-прежнему поддерживать контекст родителя. Проблема, показанная ниже в plunkr, показывает, что если действие выполняется в компоненте, оно находится в контексте компонента, а не родителя, который прошел действие. В основном типичная проблема «this = this».

Да, вы можете использовать eventAggregator для этого, но как бы вы без него. Вам нужно передать весь viewModel в компонент?

http://plnkr.co/edit/n1xPUdR5nhXwwIivawBj?p=preview

// app.js 
import { inject } from 'aurelia-framework'; 
import { MyService } from './my-service'; 

@inject(MyService) 
export class App { 
    constructor(myService) { 
     this.myService = myService; 
     this.message = "Hello World!"; 
    } 

    doThing() { 
     console.log('do a thing'); 
     this.myService.foo(); 
    } 
} 

<!--app.html--> 
<template> 
    <require from="./my-component"></require> 
    <p>${message}</p> 
    <button click.delegate="doThing()">Do the thing - in app.html</button> 
    <my-component do.bind="doThing"></my-component> 
</template> 

// my-component.js 
import { bindable } from 'aurelia-framework'; 

@bindable('do') 
export class MyComponentCustomElement { 

} 

<!-- my-component.html --> 
<template> 
    <button click.delegate="do()">Do the thing - in my-component</button> 
</template> 

// my-service.js 
export class MyService { 
    foo() { 
     alert("pity da foo"); 
    } 
} 

Answer 1

Если вы действительно хотите сделать это (может быть упрощена идти о нем), вам нужно будет получить доступ к показам модели вашего родителя из вашего ребенка вид-модели и то при вызове метода в привязке клика вашего дочернего вида используйте .call(), чтобы изменить область/контекст метода do() при его вызове.

Так что в вашем ребенок вид-модели, первый получает доступ к показам модели вашего родителя, добавив следующий bind метод:

bind(bindingContext) { 
    // bindingContext is your parent view-model 
    this.parent = bindingContext; 
} 

После того, как доступ к родительскому вида-модели вы можете обновить нажмите связывание с вашей точки зрения ребенка, чтобы быть следующим:

<button click.delegate="do.call(parent)">Do the thing - in my-component</button>

Это будет вызывать do() метод из контекста родительского вида-модели.

Вы можете использовать либо .call(scope/context, list, of, args, ...), либо .apply(scope/context, [array of args]). Для получения дополнительной информации о методе .call() вы найдете Mozilla's explanation