Question

Just started learning Win 8 app development and I’m following the basic tutorial for data binding.

The code I’m trying to understand is:

<div id="basicBinding">
          Welcome,
          <span id="nameSpan" data-win-bind="innerText: name"></span>
</div>

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

I understand it as follows, apologies if any of the terminology is wrong.

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.

The second line creates the variable ‘personalDiv’ which stores the data that has been binded to the HTML span elemet ‘nameSpan’.

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.

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.

I’m sure I’ve over complicated this a million times given its a beginners tutorial but any help would be much appreciated!

Thanks!

Answer 1

data-win-bind is just an ordinary attribute; it doesn’t actually do anything.

When you call WinJS.Binding.processAll(), it looks for all elements with that attribute and processes them.