Trying to understand this code block

Question

The following script renders required field background color of Kendo UI combobox control. Although this script works perfectly fine, I find it hard to understand it.

From what I can tell, it starts off with attaching custom property or method so called _input to Kendo ui combobox object and assign into new variable _originalFunction but rather than using this variable it's using this chained object again in the next line which I don't really get and assign returned result into this from an anonymous function that listens to an event.

In general, I don't really get what is happening inside this function and what the returned value would be.

Can someone please explain in a way I can understand?

(function ($) {
    var _originalFunction = kendo.ui.ComboBox.fn._input;
    kendo.ui.ComboBox.fn._input = function (e) {
        var result = _originalFunction.call(this, e);
        if (this.input) {
            this.input.addClass('required');
        }
        return result;
    }
})(jQuery);

Arun P Johny · Accepted Answer · 2013-07-30T05:20:11.383

1

what is happening here is, the _input from kendo's ComboBox library is enhanced to add a class required to the input element.

If you use _originalFunction instead of kendo.ui.ComboBox.fn._input in the assignment line then, you are only changing the value of local variable _originalFunction, not the function referred by kendo

(function ($) {
    var _originalFunction = kendo.ui.ComboBox.fn._input; // store the original function to a variable so that it can be called later
    kendo.ui.ComboBox.fn._input = function (e) { // overwrite the _input  function
        var result = _originalFunction.call(this, e); // call the original function to apply default functionality
        if (this.input) { // additional functionality is added here
            this.input.addClass('required');
        }
        return result;
    }
})(jQuery);

The original method accepts a single parameter, so when we call the original method, we need to use the same context and parameters as it was expecting, that is the reason for the line _originalFunction.call(this, e). But it should be better written as _originalFunction.apply(this, arguments) as it is safe against any future change in that method signature

edited Jul 30 '13 at 05:20

answered Jul 30 '13 at 04:54

Arun P Johny

384,651
66
527
531

I get the what is trying to accomplish but I would like to understand the script step by step, what is the function with an event for..etc – Seong Lee Jul 30 '13 at 04:58
function with an event? – Arun P Johny Jul 30 '13 at 05:00
Thanks, you've enhanced your answer while I was posting my above comment. – Seong Lee Jul 30 '13 at 05:01
maybe it's nothing to do event, I just didn't understand the use of `e` parameter with that function overwriting _input – Seong Lee Jul 30 '13 at 05:15
Thanks. Is that a default rule to pass a single parameter with anonymous function? And can you also please explain what `if(this.input)` checks? if `input` is true..doesn't really make sense to me unless I can see what's inside `input`. – Seong Lee Jul 30 '13 at 05:44
2

it does not check for `this.input == true` it checks whether `this.input` is [truthy](http://www.sitepoint.com/javascript-truthy-falsy/) – Arun P Johny Jul 30 '13 at 05:53

score 0 · Answer 2 · answered Jul 30 '13 at 04:55

0

This is modifying the behavior of Kendo's ComboBox _input method. It saves the original value of this function in the variable _originalFunction, then gives the function a new definition. The new definition calls the original method, saves its result, adds the required class to the input field of the combobox, and then returns that saved result.

answered Jul 30 '13 at 04:55

Barmar

741,623
53
500
612

$ is a parameter, the function is a self-executing anonymous function used to create a scope, so that variables are all local and do not pollute the global space, and finally the function is executed with $ set to jQuery, which is one way to pass in jQuery to the local scope. (Though I've wondered a bit about the necessity of that since jQuery's $ is typically global). – Paul Jul 30 '13 at 04:57
@Paul In this code it's totally unnecessary, since there are no `$` references in the code. It's just someone's boilerplate. – Barmar Jul 30 '13 at 05:02

Trying to understand this code block

2 Answers2