# Calling $(event) from within a composite component

**URL:** <https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105>\
**Category:** CanJS\
**Created:** [January 8, 2016, 5:45pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105 "2016-01-08T17:45:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [January 8, 2016, 5:45pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/1 "2016-01-08T17:45:30Z")

</div>

With a plain html button I can use the `$(click)='methodToCall'` to wire up a method to the click event.

Let’s say that I create a custom button component. How would I wire up the click event in the contained code? The following does not seem to work:

button.stache:  
\<button type=“button” class=“btn {type}” $(click)="{click}"\>  
 {{i18n ‘{text}’}}

button.js:

```
Vision.Components.Button = can.Component.extend({
    tag: 'vision-button',
    template: can.view('components/button.stache')
});

```

Using the `<vision-button click='myMethod' text='myText' />` does not seem to get the job done. In fact, the `i18n` helper is also not called.

Where am I going wrong?

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [January 8, 2016, 6:01pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/2 "2016-01-08T18:01:29Z")

</div>

It’s `($click)="methodToCall"`

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [January 8, 2016, 6:02pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/3 "2016-01-08T18:02:37Z")

</div>

I’m a bit confused by the example. `{{i18n '{text}'}}` doesn’t seem right to me either.

Anyway you can create a JSBin?

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [January 9, 2016, 11:08am UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/4 "2016-01-09T11:08:47Z")

</div>

Ok, I fixed the ($event) thingy. I’m really not concentrating 🙂

Anyhow, here is a jsfiddle: [http://jsfiddle.net/EbenRoux/qYdwR/2585/](http://jsfiddle.net/EbenRoux/qYdwR/2585/)

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [January 13, 2016, 4:46pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/5 "2016-01-13T16:46:40Z")

</div>

I think I’ve figured it out, and this time _really_ fixed the $(click) on my new fiddle:

[http://jsfiddle.net/EbenRoux/qYdwR/2587/](http://jsfiddle.net/EbenRoux/qYdwR/2587/)

Is this the way to go or is there some simpler mechanism?

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [January 13, 2016, 10:28pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/6 "2016-01-13T22:28:06Z")

</div>

If I understand what you are trying to do here, it’s as simple as passing the method to the child component and using it in the child component’s template.

**parent.stache:**

```auto
<button-component {click-method}="@callMe" text="click me"></button-component>

```

**button.stache** :

```auto
<a href="javascript://" ($click)="clickMethod()">{{text}}</a>

```

New to 2.3, `@` allows you to pass the function reference without executing it. Before this, the traditional approach would be to pass an object with the method like this:

```auto
<button-component {button-options}="buttonOptions" text="click me"></button-component>
...
<a href="javascript://" ($click)="buttonOptions.clickMethod()">{{text}}</a>

```

---

<div class="post-metadata">

**Author:** ![pYr0x](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/pyr0x/32/95_2.png) [@pYr0x](https://forums.bitovi.com/u/pYr0x)\
**Post date:** [January 15, 2016, 12:15am UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/7 "2016-01-15T00:15:35Z")

</div>

hi eben,

i looked into your jsfiddle and i am a little confused 😉

i made a jsbin example with your code and cleaned up some code.

http://jsbin.com/fahase/embed?html,js,output

first thing catches my eyes is:  
your components attributes have to `kebab-case`. so `click-method` become `clickMethod` in the stache template

second:  
you can dynamic bind on your click-method by using `($click)="{{clickMethod}}"`

third:  
you can specify your click method in the viewModel of our component. is you have the same the same method on the `Map` you commit to the `main-template` you can use `click-method="../callMe"`to use the parent scope.

fourth:  
i used simpleHelper for stache, so `text` is passed as the value instead of a compute

hope that helps you

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [January 15, 2016, 4:44am UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/8 "2016-01-15T04:44:07Z")

</div>

Brilliant!

Thanks for the help. I was about to give up on CanJS 🙂

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [January 15, 2016, 5:13am UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/9 "2016-01-15T05:13:16Z")

</div>

> [@pYr0x](#):
>
> you can dynamic bind on your click-method by using ($click)=“{{clickMethod}}”

In general, you can often avoid dynamic binding like this. You can have:

```auto
($click)="method()"

```

And then a method that calls clickMethod like:

```auto
method: function(){
  this.attr("clickMethod")();
}

```

This is especially useful if you want to call one function or another depending on some criteria.

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [January 15, 2016, 7:30am UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/10 "2016-01-15T07:30:31Z")

</div>

Quite elegant. Along the lines of my contrived solution 😊

Feeling excited about this again!

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [January 15, 2016, 6:44pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/11 "2016-01-15T18:44:53Z")

</div>

pYr0x’s example of `($click)="{{clickMethod}}"` works a charm but the following fails:

```
method: function(){
  this.attr("clickMethod")();
}

```

Seems as though the actual click method that is part of the ‘parent’ view model is not available in the component’s view model. Perhaps I’d need to explicitly add the parent view model as I did in my contrived example; else just bind directly.

I’ll see if I can create a jsfiddle tomorrow.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [January 15, 2016, 7:40pm UTC](https://forums.bitovi.com/t/calling-event-from-within-a-composite-component/105/12 "2016-01-15T19:40:03Z")

</div>

> Seems as though the actual click method that is part of the ‘parent’ view model is not available in the component’s view model.

Yeah, I was assuming it was passed to the component.