Introduction to HTML & JS Data Templates for Metro Apps

Windows Library for JavaScript (WinJS) provides convenient ways to format and display data. Here we focus on templates and a few ways of implementing them in a Metro app. Templates provide a way to present multiple instances of object data to the user with a high degree of control while maintaining ease of implementation. Templates can be used with ListViews, other controls provided for Metro app development, and can even be used without a predefined view.

In this article, three ways of using templates will be described, beginning with template basics. This section will provide an overview of templates and what roles HTML and WinJS play. The second section will describe item templates and how they can be used to display a list of items. Then, building off the second section, the third section will employ item templates with the ListView control. Finally, more advanced topics will be discussed, including nested templates and object-oriented CSS. A usable solution that contains a functional version of the code snippets provided is available at the end of the post. General data-binding experience is assumed.

Read more of my post here: and don’t forget Google+!

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s