MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

This would be appropriate if you create custom controls for other developers to use; your desktop
installation program would simply place your assets in the Addins folder. As for using such a control,
when you drag and drop the control to an HTML file, its required assets (but not the icons nor the OAM
file) are copied to the project into the root folder. You can then move them around however you like,
patching up the file references, of course.
Data Binding
As I mentioned in the introduction to this chapter, the subject of data binding is closely related to
controls because it’s how you create relationships between properties of data objects and properties of
controls (including styles). This way, controls reflect what’s happening in the data, which is often exactly
what you want to accomplish in your user experience.
I want to start this discussion with a review of data binding in general, for you may be familiar with
the concept to some extent, as I was, but unclear on a number of the details. At times, in fact, especially
if you’re talking to someone who has been working with it for years, data binding seems to become
shrouded in some kind of impenetrable mystique. I don’t at all count myself among such initiates, so I’ll
try to express the concepts in prosaic terms.
The general idea of data binding is again to connect or “bind” properties of two different objects
together, typically a data object (or context) and a UI object, which we can generically refer to as a
source and a target. A key here is that data binding generally happens between properties, not objects.
The binding can also involve converting values from one type into another, such as converting a set
of separate source properties into a single string as suitable for the target. It’s also possible to have
multiple target objects bound to the same source object or one target bound to multiple source
objects. This flexibility is exactly why the subject can become somewhat nebulous, because there are so
many possibilities! Still, for most scenarios, we can keep the story simple.
A common data-binding scenario is shown in Figure 4-10, where we have specific properties of two
UI elements, a span and an img, bound to properties of a data object. There are three bindings here: (1)
the span.innerText property is bound to the source.name property; (2) the img.src property is bound
to the source.photoURL property; and (3) the span.style.color property is bound to the output of a
converter function that changes the source.userType property into a color.
167