Rendering based on content type in Windows 8 app

Question

I'm creating a news reader app using HTML/JS for Windows 8. The content sources include videos, articles, blog posts, and DeepZoom images (using Seadragon AJAX). My question is two-fold:

1. How can I render the list view icons based on the content type? The type of content  (video, article, etc.) is specified in the data source. I'm using a ListView databind currently, but it renders all UI exactly the same.
2. Based on the content type, how can I load a different page or UI when the user chooses a piece of content? For example, articles have to be loaded in an iframe whereas a blog post is rendered in-app using toStaticHTML(). Videos will be opened in a fullscreen media player. This seems common across reader apps, so I assume this is possible.

Thanks for any help with this! 

-D

Answer 1

Just in case anyone is interested in the answer for #2, I ended up doing this by injecting items into a top-level DIV. In the ready() function for itemDetail, I did a switch statement using a content type enumeration, used WinJS.Utilities.empty on the top-level DIV, created what I needed (iframe, another DIV, Seadragon container, etc.), and did an appendChild. I'm not sure if this is the right pattern to follow, but it works. :)

Example:

itemDetail.html:

<div class="content" role="main"></div>

itemDetail.js:

WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
    ready: function (element, options) {
         var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
         element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
         var contentDiv = element.querySelector(".content");
         switch (item.ctype) {
             case Enumerations.ContentType.ARTICLE:
             {
                    WinJS.Utilities.empty(contentDiv);
                    var iframe = document.createElement("iframe");
                    iframe.src = item.url;
                    contentDiv.appendChild(iframe);
                    break;
               }
               ...             //Rest of the cases here