How can you pass an action from a parent view/ponent to a child ponent and still maintain the context of the parent. The problem shown in the below plunkr shows that if the action is executed in the ponent it is in the context of the ponent and not the parent who passed the action. Basically the typical "that = this" issue.

Yes you can use eventAggregator to do this, but how would you without it. Would you have to pass the whole viewModel into the ponent?

// 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-ponent"></require>
    <p>${message}</p>
    <button click.delegate="doThing()">Do the thing - in app.html</button>
    <my-ponent do.bind="doThing"></my-ponent>
</template>

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

@bindable('do')
export class MyComponentCustomElement {

}

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

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

How can you pass an action from a parent view/ponent to a child ponent and still maintain the context of the parent. The problem shown in the below plunkr shows that if the action is executed in the ponent it is in the context of the ponent and not the parent who passed the action. Basically the typical "that = this" issue.

Yes you can use eventAggregator to do this, but how would you without it. Would you have to pass the whole viewModel into the ponent?

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-ponent"></require>
    <p>${message}</p>
    <button click.delegate="doThing()">Do the thing - in app.html</button>
    <my-ponent do.bind="doThing"></my-ponent>
</template>

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

@bindable('do')
export class MyComponentCustomElement {

}

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

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

• javascript
• ecmascript-6
• aurelia

Share Improve this question Follow asked Jul 13, 2015 at 20:42 Joshharris11Joshharris11 2311 silver badge44 bronze badges 1

• 1 That's some bad design you want to try. If you want to use a service from the outside of the ponent, it should be injected not bound. I don;t know how aurelia bindings work, but I don't think you can bind functions. However, even if you could is still bad design. – MikeSW Commented Jul 13, 2015 at 21:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

If you REALLY wanted to do this (there may be cleaner ways to go about it), you would need to get access to your parent's view-model from your child view-model and then, when calling the method in your child view's click binding, use .call() to change the scope/context of the do() method when it's called.

So in your child view-model, first gain access to your parent's view-model by adding the following bind method:

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

After you have access to your parent view-model you can update the click binding in your child view to be as follows:

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

This will call the do() method from the parent view-model's context.

You can use either .call( scope/context, list, of, args, ... ) or .apply( scope/context, [array of args]). For more info on the .call() method check out Mozilla's explanation