# How to use parent this context in HTML only child view?

**URL:** <https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320>\
**Category:** Help Requests\
**Created:** [March 22, 2020, 12:29pm UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320 "2020-03-22T12:29:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [March 22, 2020, 12:29pm UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/1 "2020-03-22T12:29:54Z")

</div>

I have one parent view and a couple of html only child views. These child views all need to call various functions declared in the parent view.

Is there a way to pass the `this` context of the parent view to each child, so that they can access these functions?

Please see code below for more info.

PARENT TEMPLATE

```
<template>
     <require from="../elements/child-01.html"></require>
     <require from="../elements/child-02.html"></require>
     <require from="../elements/child-03.html"></require>

    <div if.bind="showChildOne">
         <child-01></child-01>
    </div>

    <div if.bind="showChildTwo">
         <child-02></child-02>
    </div>

    <div if.bind="showChildThree">
         <child-03></child-03>
    </div>
</template>

```

CHILD-01 TEMPLATE

```
<template>
    ...
   <div click.delegate="someFunctionFromParent()">
   </div>
    ...
</template>

```

CHILD-02 TEMPLATE

```
<template>
    ...
   <div click.delegate="someFunctionFromParent()">
   </div>
    ...
</template>

```

CHILD-03 TEMPLATE

```
<template>
    ...
   <div click.delegate="someFunctionFromParent()">
   </div>
    ...
</template>

```

* * *

* * *

* * *

One way to go is to do the following:

Parent

```
<div if.bind="showChildOne">
     <child-01 context.bind="$this"></child-01>
</div>

```

Chid

```
<template bindable="context">
    ...
   <div click.delegate="context.someFunctionFromParent()">
   </div>
    ...
</template>

```

Is there another way to do this?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 22, 2020, 9:33pm UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/2 "2020-03-22T21:33:47Z")

</div>

Is this what you want:  
[https://gist.dumber.app/?gist=9495e66607cf06a3ecc34e5779a6137c&open=src%2Fapp.html](https://gist.dumber.app/?gist=9495e66607cf06a3ecc34e5779a6137c&open=src%2Fapp.html)

The idea is to use `.call` binding command to pass the expression specified as a function for later invocation.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [March 23, 2020, 1:18pm UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/3 "2020-03-23T13:18:49Z")

</div>

Thanks for your answer, but it’s not exactly what I am looking for. So in your example the only thing that get bound into the child view is a function. I would like to know if its possible to allow the html only child to have access to the parent view model (included all methods and properties).

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [March 24, 2020, 3:02am UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/4 "2020-03-24T03:02:49Z")

</div>

You could use dynamic ui composition here ([https://aurelia.io/docs/templating/dynamic-ui-composition/](https://aurelia.io/docs/templating/dynamic-ui-composition/))

In short: `<compose view="./child1.html"></compose>` will compose child1.html with the current binding context.

See gist:  
[https://gist.dumber.app/?gist=bbff339c67093ff398f8543214ea81c0](https://gist.dumber.app/?gist=bbff339c67093ff398f8543214ea81c0)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 24, 2020, 10:05am UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/5 "2020-03-24T10:05:12Z")

</div>

By default, all html only element have their binding context (parent view model) assigned to `$parent` property. The code is here [https://github.com/aurelia/templating-resources/blob/5e3af9e7e69bd7c243c917613bea6f0e274e1bf7/src/dynamic-element.ts#L16](https://github.com/aurelia/templating-resources/blob/5e3af9e7e69bd7c243c917613bea6f0e274e1bf7/src/dynamic-element.ts#L16)

So you can call parent methods from child like this: `$this.$parent.someMethod()`. Example here [https://gist.dumber.app/?gist=5a052515305e889fc9bb2bb35c6ea7f9&open=src%2Fchild-01.html](https://gist.dumber.app/?gist=5a052515305e889fc9bb2bb35c6ea7f9&open=src%2Fchild-01.html)

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [March 25, 2020, 9:42am UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/6 "2020-03-25T09:42:57Z")

</div>

Awesome. Thanks for the help. I think I will try out both and see which fits best.

---

<div class="post-metadata">

**Author:** ![Sjaak](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sjaak/32/1377_2.png) [@Sjaak](https://discourse.aurelia.io/u/Sjaak)\
**Post date:** [March 26, 2020, 2:32pm UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/7 "2020-03-26T14:32:49Z")

</div>

Curious, why do we need to call `$this .$parent` rather than just `$parent`? DynamicElement seems to be the implicit viewmodel of the view, so since `$parent ` is a property, should this not always be available? When do and when dont we need to explicitly use `$this`? Thanks!

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 28, 2020, 3:45am UTC](https://discourse.aurelia.io/t/how-to-use-parent-this-context-in-html-only-child-view/3320/8 "2020-03-28T03:45:58Z")

</div>

In short, it’s an naming choice that was aimed for consistency, but unfortunately confusing.

Normally in Aurelia, an expression starting with `$parent` in template makes Aurelia binding goes up 1 “level”, in term of scope. This is generally used in `repeat`/`with` blocks. Custom element does not have a parent scope that can be traversed normally with `$parent`.

To compare:  
`$parent.handleChildClick()` means: walk up 1 level of scope (nothing), and call `handleChildClick()`  
`$this.$parent.handleChildClick()` means: get current scope (`$this`), access property `$parent` and then call `handleChildClick` on that.