Question

I’m trying to extend the existing dijit.form.Button to accept a ‘topic’ property and publish that command/topic onClick. The solution I’ve come up with requires a reference to the former Button.prototype_onClick method. Is there a better way to code this so the usage example below will still work?

define(["dojo/_base/lang", "dijit/form/Button"], function(lang, Button) {
    var oldClick = Button.prototype._onClick;
    lang.extend(Button, {
        topic: null,
        _onClick: function(e) {
            alert('test');
            if (this.topic) {
                connect.publish(this.topic);
            }
            return oldClick.apply(this, arguments);
        }
    });
});

usage:

<button dojo-data-type="dijit.form.Button" data-dojo-props="topic: 'test'">Test</button>

require(["dojo/_base/connect"], function(connect) {
    connect.subscribe("test", function() {
        alert("you just clicked the test button");
    });
});​​

Answer 1

Consider Aspect-oriented programming, i.e. dojo/aspect:

require([
    "dojo/aspect",
    "dojo/topic",
    "dijit/form/Button"
], function(
    aspect,
    topic,
    Button
) {

    aspect.after(Button.prototype, "_onClick", function(e) {
        this.topic && topic.publish(this.topic);
    });

    topic.subscribe("test", function() {
        console.log("test topic");         
    });

});​

See it in action: http://jsfiddle.net/phusick/2rjfJ/