Win 8 App Development: How does this tutorial code work?
<p>Just started learning Win 8 app development and I'm following the basic tutorial for data binding. </p>

<p>The code I'm trying to understand is:</p>

<pre><code>&lt;div id="basicBinding"&gt;
          Welcome,
          &lt;span id="nameSpan" data-win-bind="innerText: name"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var person = { name: "Fran" };
var personDiv = document.getElementById("nameSpan");
WinJS.Binding.processAll(personDiv, person);
</code></pre>

<p></p>

<p>I understand it as follows, apologies if any of the terminology is wrong. </p>

<p>The first line in the script creates a variable called 'person' which is a object literal and within it we is stored the name data.</p>

<p>The second line creates the variable 'personalDiv' which stores the data that has been binded to the HTML span elemet 'nameSpan'.</p>

<p>The third line of the script actually processes the first and second line so that the variables are available to the rest of the code.</p>

<p>What I don't understand is how the span element actually outputs the 'name' value of Fran. I can't quite figure out exactly what is going on that allows the 'data-win-bind' call recognise the 'person' variable and retrieve the name data. the 'personDiv' variable seems to try and retrieve a value from 'nameSpan' before nameSpan even has a value (which Is obviously me just interpreting it wrongly but I can't see the correct logic. </p>

<p>I'm sure I've over complicated this a million times given its a beginners tutorial but any help would be much appreciated!</p>

<p>Thanks! </p>
