This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Anton Kosarchyn
Posted Dec 03 - Read on Facebook

Hi guys
I'm trying to build a radio button group that will throw the custom "change: activeOption" event, when the user selects some option. I have a root class called radioGroup and some child elements radio, label etc..

I stucked, because I have the "radio.onTap ->" event that emits the custom event "change: activeOption", which in turn refers to the class root container property "activeOption". I refer to that property through "this.activeOption" ("this" here means the root container of the class). But being placed within the "radio.onTap ->" construction "this" is referencing to the "radio" itself.

How can I refer to the root container of the class through "this" keyword in another event (radio.onTap ->), which refers to the child element of the class? Or maybe there is another way of doing it?

Framer code is attached (issue line is commented within radio.onTap ->).
Thanks in advance!?


Steve Ruiz

Fat arrows! In a callback, using => instead of -> will preserve the current object reference (ie the meaning of ‘this’) in the callback.

Anton Kosarchyn

Hi, Steve
Thank you for the response. I've tried to use the fat arrows already, but then I realised I can't reference the radio, that is clicked by user. Event works in that case, but it alway returns 4 option, which is the last radio in the group (obviously).

Since I need 'this' to reference the radio, being clicked, how can I reference the root container then?

Please, take a look at the code, I've attached. Thank you!

Steve Ruiz

Will do. Also, it's probable a "do" issue: check out how to use coffeescript "do" in loops

Karina Kozinsky

I had the same issue, would love to know the solution!!

Chris Ramesh

Hey! Not sure what best practices are, but I got it to work - see the framer link below. I left comments in the code so you can see what changed.

But tl;dr, there were two tweaks I had to make because 'this' within the radio.onTap -> block refered to the radio layer:

1) made the parent emit the 'change:ActiveOption' instead of the radio itself (I thought it would propagate to parent but it didn't I guess)
2) I tweaked some traversal stuff to ensure the right layer was being selected for accessing values

Anton Kosarchyn

Hi, Chris
It was really clever to reference the parent through the "this.parent" construction! It's obvious, but I've not thought about it.
Thank you for the help!

Btw, are there any other methods how I can reference the root class container without using 'this' inside the constructor?

Read the entire post on Facebook