Custom Wijmo 5 Control

Create a Custom Wijmo 5 Control by extending wijmo.Control

by banzor

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
 <h1>MyControl: A Custom Wijmo 5 Control</h1>

<div id="myControl" style="width:300px;background-color:yellow;"></div>
<div id="myOtherControl" style="width:400px;background-color:powderblue;"></div>
<script>
    $(function() {

        // create first control, set caption
        var ctl = new MyControl('#myControl');
        ctl.caption = 'this is the first control';
        ctl.buttonClicked.addHandler(function(sender, args) {
            alert('thanks for clicking the button in the first control');
        });

        // create another control, set caption
        ctl = new MyControl('#myOtherControl');
        ctl.caption = 'this is the second control';
        ctl.buttonClicked.addHandler(function(sender, args) {
            alert('thanks for clicking the button in the second control');
        });
    });
</script>

JavaScript

var __extends = this.__extends || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];

        function __() {
            this.constructor = d;
        }
        __.prototype = b.prototype;
        d.prototype = new __();
    };
/**
 * A Custom Control that extends the wijmo.Control class.
 */
var MyControl = (function (_super) {
    __extends(MyControl, _super);
    /**
     * Initializes a new instance of a @see:MyControl.
     *
     * @param element The DOM element that will host the control, or a jQuery-style selector (e.g. '#theCtrl').
     * @param options JavaScript object containing initialization data for the control.
     */
    function MyControl(element, options) {
        _super.call(this, element);
        /**
         * Occurs when the button is clicked.
         */
        this.buttonClicked = new wijmo.Event();

        // instantiate and apply template
        var tpl = this.getTemplate();
        this.applyTemplate('wj-control', tpl, {
            _btn: 'btn',
            _lbl: 'lbl'
        });

        // raise buttonClicked event when the button is clicked
        var self = this;
        this._btn.addEventListener('click', function () {
            self.onButtonClicked();
        });

        // initialize control
        this.caption = 'Hello Wijmo!';
        if (options) {
            this.initialize(options);
        }
    }
    Object.defineProperty(MyControl.prototype, "caption", {
        /**
         * Gets or sets the text shown above the button.
         */
        get: function () {
            return this._lbl.textContent;
        },
        set: function (value) {
            // use asString to ensure type is correct
            this._lbl.textContent = wijmo.asString(value);
        },
        enumerable: true,
        configurable: true
    });

    /**
     * Raises the @see:buttonClicked event.
     */
    MyControl.prototype.onButtonClicked = function (e) {
       ...