Hello All,
I am very new to YUI, as in tonight I used it for the first time. I have been reading some great tutorials and I was able to write my first small app with it. In my test app, there is one thing I dont understand but it is working. I cannot seem to break it in a way I understand. Below is my full code:
<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<script language="javascript">
YUI().use("io",
function(Y) {
var test1 = "test1.php";
var test2 = "test2.php";
var div = document.getElementById('container');
var getData = {
start: function() {
div.innerHTML = "Getting Data!<br />";
},
complete: function() {
div.innerHTML += "Analyzing Data!<br />";
},
success: function(id, results, args) {
div.innerHTML += "Answer: " + results.responseText + "<br />args: " + args +"<br />";
},
failure: function() {
div.innerHTML += "There was an error!<br />";
},
end: function() {
div.innerHTML += "End!";
}
}
var test_data = {
end: function() {
div.innerHTML = "TEST DATA!";
}
}
Y.on('io:start', getData.start, getData);
Y.on('io:complete', getData.complete, getData);
Y.on('io:success', getData.success, this,'global bar');
Y.on('io:failure', getData.failure, getData);
Y.on('io:end', getData.end, getData);
function which_script(x,y) {
if(y == 1)
{
div.innerHTML = x + "<br />";
Y.io(test1);
}
else
{
Y.io(test2);
}
}
Y.on('click', which_script, "#click1", this, 1);
Y.on('click', which_script, "#click2", this, 2);
}
);
</script>
<div id="container" style="border:#000 medium solid;vertical-align:middle;text-align:center;">
<p>Populate Data Here.</p>
</div>
<span>
<div id="click1" style="color:#FFF;background-color:#00F;display:inline;">5 + 5 IS</div>
<div id="click2" style="color:#FFF;background-color:#00F;display:inline;">8 - 6 IS</div>
</span>My question is specifically about:
Y.on('io:start', getData.start, getData);
Y.on('io:complete', getData.complete, getData);
Y.on('io:success', getData.success, this,'global bar');
Y.on('io:failure', getData.failure, getData);I understand that if I want to pass parameters, I need to have a 3rd parameter. ie, if the function I am calling has 2 parameters, I need to have 5 in my io:start (or any other event). It seems I can pass whatever I want for the third parameter though. In my testing, the following worked:
Y.on('io:success', getData.success, whatever,'global bar');just as well as
Y.on('io:success', getData.success, this,'global bar');or
Y.on('io:success', getData.success, getData,'global bar');as long as I declared it. ie:
var whatever;I fully understand there are many features of YUI I am unfamiliar with but I have to believe there is a reason for the third parameter. Can someone explain what the purpose of it is. I have a hard time believing it is just a place holder but that is how it appears to me currently.
Thanks!