Removal of the $w Parameter from Event Handlers

Important: Your existing code will continue to work as it always has. No immediate action is required.

What’s going on?

We’re removing the $w parameter from event handlers. Event handlers will now only have an event parameter.

For example, until now, when you added an onClick event handler to a button using the properties panel, the following code would be added to the code panel:

export function myButton_click(event, $w) {
  //Add your code for this event here:
}

Now you will get the following code instead:

export function myButton_click(event) {
  //Add your code for this event here:
}

If you have no idea why the $w parameter was there in the first place, you can safely skip the rest of this message. However, if you’re now worried about how you’re going to use event handlers with repeaters, please keep reading.

How will I get a scoped selector?

Until now, you’d use the $w parameter of an event handler to get a scoped selector.

Events in repeaters are fired from an element in a repeater item. The $w parameter lets you select the specific instance of an element that is in the same repeater item as the element that fired the event.

For example, here when a repeated image is clicked, the value of a text element in the same repeated item as the clicked image is changed to “Selected”:

export function myRepeatedImage_onClick(event, $w) {
  $w("#myRepeatedText").text = "Selected";
}

Going forward, you’ll use the $w.at() function to get a scoped selector. The function takes a context parameter that determines the scope of the selector you receive. You get the proper context from the event handler’s event parameter.

So, to mimic the above example, you will write the following code:

export function myRepeatedImage_onClick(event) {
  let $item = $w.at(event.context);
  $item("#myRepeatedText").text = "Selected";
}

Additionally, you can now get a scoped selector in dataset event handlers.

For example, here when the dataset is about to save, a text element shows a message relaying that a save is occurring:

export function dataset_beforeSave(event) {
  let $item = $w.at(event.context)
  $item("#statusText").value = "Saving...";
} 

What do I need to do so my code doesn’t break?

Nothing. That’s right, your existing code will not break. We will continue supporting the old way of doing things, but we strongly encourage you to use the new syntax going forward.

Also note that the code panel’s autocompletion will no longer include the $w parameter in event handlers.

When will this happen?

You can start using the new syntax on August 1st.

3 Likes

Wow! Nice way to go man!

This is an awesome upgrade. Exciting to see how it will pan out.

This change seems to have been rolled out for me already. One thing to note is that my event handlers are still being created with $w as the second parameter. So it is in fact causing my site not to work properly for new event handlers, giving the error $w is not a function .

To fix, I had to remove the $w from each event handler function signature.

1 Like

Sam, can you check out this post I just added:

I am not sure if this is a bug recently added or an expected behaviour.
Cheers

Thanks for this explanation! It is helpful

1 Like