The dark side of the force

I have been spending a lot of time lately working on a new javascript based interface. As with any js project we ended up with a lot of layers. For instance for a simple numeric input there are:

The fun part is that we needed of course some functionality which did not existed in the kendo component (adding support for financial shortcuts: 10k => 10,000).

Since I still have an OOP structured mind, with lot of years of java pattern I thought: Ok, will create a component which extends on kendo and re-wrap.

This would look similar to:

$(function() {
    // wrap the widget in a closure. Not necessary in doc ready, but a good practice
    (function($) {
        // shorten references to variables. this is better for uglification 
        var kendo = window.kendo,
            ui = kendo.ui,
            NumericTextBox = ui.NumericTextBox;
        // create a new widget which extends the first custom widget
        var NumberInput = NumericTextBox.extend({
            // every widget has an init function
            init: function(element, options) {
                var that = this;
      , element, options);
            _keypress: function(e) {
                //override here!!
            options: {
                name: "NumberInput"
        // add this new widget to the UI namespace.

Well, this seemed ok and it worked ok but still requires a lot of work to wrap into an usable aurelia component which maps all the events and options: precision, step …

At this moment it struck me! This is javascript! BUHUHU, there is no need for all this. I could just do this in our wrapper:

    attached() {
        this.taskQueue.queueTask(() => {
            //assuming ak-numerictextbox="k-widget.bind:numericTextBox; in the template
            this.numericTextBox._orig_keypress = this.numericTextBox._keypress;
            this.numericTextBox._keypress = this._keypress;

Now I have switched to the dark side of the force! More details on this github.


Leave a Reply