CODEWITHSUNDEEP
javascriptkendo-ui
Vojtiik
Vojtiik

Reputation: 2560

Variables in js

I am quite a noob in regards to js and today I come across bit of js I don't really understand and I would like to. Could you please shed some light ? There is Kendo involved but the question is plain js.

I have a nested grid, eg. each row can expand into other grid and each of this grid has its own datasource. I populate the datasources via the method below one by one as user clicks and I had a problem with forcing the datasource to read when it receives async response from the create call. (calling the read is pretty much incorrect thing to do, but Kendo has its own bugs - not a point here.). My problem was, I didn't have an instance to call the read() on, the method only returns datasource and assigns it to a grid, when the event comes back I can't find any reference to anything I could get the correct datasource instance from. this is different context in here.

In order to resolve this I added a datasource variable into the method what builds the datasource and I return the variable instead the datasource, which is the same thing. However this helps to have something to call the problematic read() on. Now in my create handler I call create on the variable I am returning in the method during innit. Well it works, but I am not sure if every datasource is calling read on its own instance after innit ? 

function _getDatasource() {
        var datasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: serviceBaseUrl + "ReadQuestionnaire",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",

                },               
               create: {
                    url: serviceBaseUrl + "CreateQuestionnaire",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    complete: function (jqXhr, textStatus) {
                        if (CheckForExceptions(jqXhr, textStatus) == false) {
                            // this is the variable I am not sure about 
                            // after innit does this always refers to this same datasource ?
                            datasource.read(); 
                        }
                    }
                }
            }
        });
        return datasource;
}

Upvotes: 1

Views: 190

Answers (1)

Derick Bailey
Derick Bailey

Reputation: 72868

Your solution is correct, and yes, the datasource.read() call is the correct datasource object in each case.

Here's why this works: closures.

A closure is the ability to have a variable declared in one function accessible from a nested function. Or, for a more accurate description, see the wikipedia page: http://en.wikipedia.org/wiki/Closure_(computer_science)

Here's a very simple example:


function doStuff(){
  var name = "Derick";

  function sayMyName(){
    console.log(name);
  }

  sayMyName();
}

doStuff();

In this example, I'm declaring a variable name inside of the doStuff function. Then I'm nesting another function inside of the first function. The sayMyName function is accessing the name variable through the use of a closure.

When I call doStuff(), the variable is defined and assigned to a value. Then the sayMyName function is defined and it uses that variable. I then call sayMyName() and it logs the name to the console.

Similarly, in your code you are creating a variable that is assigned to the instance of the DataSource. Later, you are defining a function for the complete callback. After the data source has loaded and the complete callback is fired, you are accessing the same dataSource variable that you had assigned to the DataSource instance through the use of a closure around that variable.

Since you are declaring var dataSource every time you call _getDataSource, you are creating a new variable / reference, assigned to a new DataSource instance. I don't think you need to return datasource at the bottom of your function, though... at least, not for the complete callback function to work. Maybe you need it for something else, outside of this function, though?

For more information on closures in JavaScript:

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

How do JavaScript closures work?

http://www.javascriptkit.com/javatutors/closures.shtml

http://www.watchmecode.net/javascript-scope (paid screencast)

HTH

Upvotes: 3

Related Questions