# Demystify .call binding

**URL:** <https://discourse.aurelia.io/t/demystify-call-binding/3872>\
**Category:** Framework Knowledge\
**Created:** [November 5, 2020, 1:08am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872 "2020-11-05T01:08:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 5, 2020, 1:08am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/1 "2020-11-05T01:08:27Z")

</div>

There seems to be few misunderstanding in related to:

```auto
something.call="method()"

```

I want to help to clarify in this post.

- When you do `something.bind="a + 1"`, the expression `a + 1` is evaluated when the binding happens.
- When you do `something.call="method()"`, the expression `method()` is **NOT** evaluated when the binding happens, the `method()` will be called when later you call `something()` in JS code (or click.trigger or click.delegate in html).

Most users have picked up the above. But to fully understand it, you have to know the `.call` doesn’t need to bind to a form of function call like `method()`, **it can bind to any expression, it just delays the evaluation of the expression**.

For a concrete example, consider this:  
`app.html`

```auto
<template>
  <require from="./play"></require>
  <play on-press.call="count = count + value"></play>
  <p>Count: ${count}</p>
</template>

```

`app.js`

```auto
export class App {
  count = 0;
}

```

Two take away:

1. `on-press.call="count = count + value"` binds to an expression with side effect.
2. `value` is not available in the binding context at the moment.

Aurelia `.call` give you this nice feature to supply additional binding context when calling the bound procedure, you can do `onPress({ value: 1 })` to provide number 1 to property `value` **when calling onPress**.

This behaviour is the same one that supports `on-press.call="method(value)"` and `onPress({ value: 1 })`. You just need to know there is no special treatment on the syntax `method(value)`.

1. `method(value)` is just an expression to be delayed, same as `count = count + value`.
2. `value` is only evaluated when you call `onPress(...)`, which you can supply additional binding context.

Full demo here:

> **[Dumber Gist](https://gist.dumber.app/?gist=645eee1920edd24cfdef9407a82ff511&open=src%2Fapp.html&open=src%2Fapp.js&open=src%2Fplay.js)**

---

<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:** [November 8, 2020, 12:33pm UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/2 "2020-11-08T12:33:40Z")

</div>

Awesome post 👍 👍

---

<div class="post-metadata">

**Author:** ![Alfhir](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alfhir/32/1510_2.png) [@Alfhir](https://discourse.aurelia.io/u/Alfhir)\
**Post date:** [November 9, 2020, 8:20am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/3 "2020-11-09T08:20:47Z")

</div>

Thank you very much @huochunpeng.  
I´ll memoize `.call` as ‘lazy bind’ from now on.  
🙂

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [November 25, 2020, 4:17am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/4 "2020-11-25T04:17:37Z")

</div>

What are the benefits as compared to just emitting an event?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 26, 2020, 12:30am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/5 "2020-11-26T00:30:10Z")

</div>

Yes, event aggregator can be used to cover this communication too. I would say ea can cover more use cases because of total decoupling.

The .call binding does save you from ea.subscribe and subscriber.dispose boilerplate. If an event is going to be consumed by only one subscriber, .call is a cheaper solution. Also .call binding limits the subscriber to be the parent element.

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [November 26, 2020, 8:11am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/6 "2020-11-26T08:11:02Z")

</div>

I was thinking about DOM events instead

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 26, 2020, 8:20am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/7 "2020-11-26T08:20:37Z")

</div>

Events have the notion of bubbling whereas call bindings are directly related to the parent. One way to think about call is to pass in business handlers into a dumb presentational component. So think of a dahsboard where each widget gets an update callback passed and can handle proper timing by itself. With EA the parent would have to orchestrate things

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [November 27, 2020, 6:23am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/8 "2020-11-27T06:23:57Z")

</div>

It wouldn’t bubble it not told so, would it?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 27, 2020, 9:49am UTC](https://discourse.aurelia.io/t/demystify-call-binding/3872/9 "2020-11-27T09:49:20Z")

</div>

Thats true, but I was just mentioning it as a benefit for If you need that functionallity. Think of listening on the element vs document like Trigger/Delegate