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