HTML and CSS Reference
In-Depth Information
<div class="center">
<span id="numberContainer" data-win-bind="innerText: generatedValue"></span>
</div>
<div class="center">
<input id="numberButton" type="button" value="Get Number" />
</div>
<footer>
<hr />
Dino Esposito | Francesco Esposito
</footer>
</body>
</html>
The SPAN element is decorated with the data-win-bind attribute. Properly interpreted by the
Windows 8 runtime, this attribute does the magic of setting the content of the element via the
innerText property. What is the generatedValue string you see in the code snippet then? The idea is
generating a random number and displaying it through the user interface.
Even though you can bind any kind of data to an HTML element, including single pieces of data
such as a string or a number, it is likely that you will need to do that for compound objects resulting
from a mix of text, numbers, and dates. Let's then assume you have a JavaScript object to describe the
data to bind. Add the following script to the bottom of default.js file:
// Gets an object embedding a random number between 1 and 100
function displayGeneratedNumber() {
var randomNumber = { generatedValue: Math.floor((Math.random()*100)+1) };
// more code needed here
}
You now have a JavaScript object with a property name generatedValue that contains a random
generated number comprised between 1 and 100. In light of this, the following markup gets a bit
more significance:
<span id="numberContainer" data-win-bind="innerText: generatedValue"></span>
The string generatedValue is an expression that refers to the value you intend to assign to the
innerText property. But there's one more aspect to clarify: How can the Windows 8 runtime know
about the object that exposes the generatedValue property? You need to get back to default.js and
rework the displayGeneratedNumber function a bit:
// Gets an object embedding a random number between 1 and 100
function displayGeneratedNumber() {
Search WWH ::




Custom Search