Enabling Proper Emission of 'Change' in Custom Widgets at Dojo Practice

Question

Enabling Proper Emission of 'Change' in Custom Widgets at Dojo Practice

Picture this: there's a listener set up for the native dijit/form/Select element, ready to respond to the change event:

nativeSelectWidget.on('change', lang.hitch(this, onSelectClick));

Now, I've developed my own custom widget that closely resembles Select and attempted to listen using the same code:

mySelectWidget.on('change', lang.hitch(this, onSelectClick));

The function onSelectClick appears as follows:

_onTypeChange: function(value) {
  console.debug('The value is, value)
}

The issue here is that in the second case, onSelectClick isn't receiving any values (undefined).

I attempted to include:

on.emit(this.domNode, 'change', {
  bubbles: true,
  cancelable: true
});

in the widget's _setValueAttr, but it didn't work. No value was being passed through. I checked how the native Select is defined here: https://github.com/dojo/dijit/blob/master/form/Select.js

Any recommendations?

javascript dojo

Answer 1

Answer №1

When creating your custom widget, ensure to follow these steps:

1) Inherit from dojo/Evented
2) Include the following code snippet:

_setValueAttr: function(value) {
    this._set('value', value);
    this.emit('change', value);
}

This approach should resolve the issue at hand.

Nevertheless, there is a limitation in this implementation: If the value is modified from another section of the code, the emit will still trigger. Typically, we prefer to emit events only for user interactions and not for programmatic changes.

Answer 2

When creating your custom widget, ensure to follow these steps:

1) Inherit from dojo/Evented
2) Include the following code snippet:

_setValueAttr: function(value) {
    this._set('value', value);
    this.emit('change', value);
}

This approach should resolve the issue at hand.

Nevertheless, there is a limitation in this implementation: If the value is modified from another section of the code, the emit will still trigger. Typically, we prefer to emit events only for user interactions and not for programmatic changes.

Enabling Proper Emission of 'Change' in Custom Widgets at Dojo Practice

Answer №1

Similar questions

Utilizing VueJs @error handler for managing broken image links

Postponed in JQUERY | AJAX

There seems to be an issue with the integration of Bootstrap in my JavaScript file

Select information from an array and store it within an object

a expanding list with automatically loaded information

Linking a variable in typescript to a translation service

What is the best way to retrieve the value of an UL LI element using jQuery

What is the most effective way to compare a property with the values stored in an array of objects?

Is it possible to categorize elements for focus and onblur events?

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

How do I adjust brightness and contrast filters on a base64 URL?

The redirect function is failing to carry the "req" parameter

Creating a form in Vue that dynamically generates checkbox options

Steering clear of Unique error E11000 through efficient handling with Promise.all

Creating a custom synchronization method in backbone.js to implement a loading animation

What am I doing wrong that causes me to repeatedly run into errors when trying to build my react app?

Adding a basic fade-in effect to an element that is lazily loaded using JavaScript

Locate the highest and lowest values within a .json file

Populating the array by calculating the average values

Is it possible to use Harvest's Chosen alongside the Python Pyramid Framework?