_WidgetBase and Evented

Mixing in Evented and properly using on/emit.

by Thomas Upton

JavaScript

require([
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dojo/Evented',
    'dojo/on'
], function(declare, _WidgetBase, Evented, on) {
    console.log('Proper Evented usage');
    
    var MyWidget = declare([_WidgetBase, Evented], {
        doSomething: function() {
            console.log('doing something...');
            this.emit('done', {value: 'x'});
        }
    });
    
    var w = new MyWidget();
    
    w.on('done', function(data) {
        console.log('the widget is done, got', data.value);
    });
    
    w.doSomething();
    
    // -----------------------------------------------------
    
    console.log('No Evented, but a method uses emit() with a data object');
    
    var MyUnEventedWidget = declare([_WidgetBase], {
        doSomething: function() {
            console.log('doing something unevented...');
            this.onDone({value: 'x'});
        },
        
        doSomethingEvented: function() {
            console.log('doing something evented in UnEvented...');
            this.emit('done', {value: 'x'});
        },
        
        onDone: function() {}
    });
    
    var unevented = new MyUnEventedWidget();
    
    unevented.on('done', function(data) {
        // this will not work for doSomethingEvented, but will for doSomething
        console.log('the unevented widget is done, got', data.value);
    });
    
    unevented.doSomething();
    unevented.doSomethingEvented();
    
    // -----------------------------------------------------
    
    console.log('Mixes in Evented but still uses on* style placeholders');
    
    var MyWrongWidget = declare([_WidgetBase, Evented], {
        doSomething: function() {
            console.log('doing something wrong...');
            this.onDone({value: 'x'});
        },
        
        doSomethingEvented: function() {
            console.log('doing something evented in Wrong...');
            this.emit('done', {value: 'x'});
        },
        
        onDone: function()...