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