PDA

View Full Version : Please help me understand the sample code



martonic
7 Nov 2013, 11:57 AM
Hi! I am working through the "City Bars" example (first Touch application). The code for the controller's "Launch" function, as given in the tutorial, reads as follows:



var me = this;
Ext.Viewport.setMasked({ message: 'Loading...' }); // Get the user's location

me.getLocation(function (location) { // Use Yelp to get the business names
me.getBusinesses(location, function (store) { // Bind data to the list and display it
me.getDataList().setStore(store);
Ext.Viewport.setMasked(false);
});
});


I recognize the two nested implicit functions. What I don't see is where the arguments (location, and store) to those implicit functions are supposed to come from.

For instance, when this code runs, where will the "store" argument [that gets passed to me.getDataList().setStore()] have been set - and to what?

Can anyone help me understand this code fragment? Many thanks, in advance.

ingo.hefti
9 Nov 2013, 2:54 AM
the variable 'store' comes from the inline function 'getBusinesses' which seems to have 2 arguments: the location to get the businesses for and a callback function that will be called with the store (containing the businesses found) as an argument:


me.getBusinesses(location, function(store) {
me.getDataList().setStore(store);
Ext.Viewport.setMasked(false);
});

no magic, just JavaScript.

keckeroo
11 Nov 2013, 11:25 PM
I have to admit - the coding for this example is not the best example of an easy to follow guide. But maybe I can break it down into simpler terms for you.

The 'hidden' part of all this is the named methods in these anonymous functions. You will see that each of them makes calls to the 'callback', passing parameters to them. That is where you get the source of what parameters are provided for these anonymous functions.

Notice that the getCity function issues the line 'callback(DEFAULT_CITY)' - that indicates it is going to be calling the function and passing, in this case the city it found.

Keeping with this line of reasoning you will notice that getBusinesses creates a store - and further down calls the second anonymous function with a store as an argument - callback(store) - in the load listener of the Ajax call.

If everything were executed synchronously (in sequence) an simpler explanation of what is really happening would be something like :

var city = getCity();
var businessStore = getBusinesses(city);
dataView.setStore(businessStore);

Keep in mind - the above is a very simplistic way of representing what is happening.

I hope this helps clear things up for you :-)

Kevin