Hi,
I am trying to add FlipView to the itemDetail page in the standard Grid App in VS 2012 so that the user can flip through each of the items in a group. But I'm getting an unhelpful error message which is leading me nowhere. Can someone help me with this? I'm
attaching my itemDetail.html and itemDetail.js here:
itemDetail.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>itemDetailPage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
<script src="/js/data.js"></script>
<script src="/pages/itemDetail/itemDetail.js"></script>
</head>
<body>
<div class="itemtemplate" id="itemtemplate" data-win-control="WinJS.Binding.Template">
<article>
<header>
<h2 class="item-title"></h2>
<h4 class="item-subtitle"></h4>
</header>
<img class="item-image" src="#" />
<div class="item-content"></div>
</article>
</div>
<div id="itemdetailpage" class= "itemdetailpage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"></span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div class="itemdetails" data-win-control="WinJS.UI.FlipView"></div>
</section>
</div>
</body>
</html>
itemDetail.js:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
getAnimationElements: function () {
return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
},
setPageFocus: function () {
this.element.querySelector(".content").focus();
},
// This function is called whenever a user navigates to this page. It populates the page elements with the app's data.
ready: function (element, options) {
var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector("article .item-title").textContent = item.title;
element.querySelector("article .item-subtitle").textContent = item.subtitle;
element.querySelector("article .item-image").src = item.backgroundImage;
element.querySelector("article .item-image").alt = item.subtitle;
element.querySelector("article .item-content").innerHTML = item.content;
element.querySelector("header[role=banner] .pagetitle").textContent = item.group.title;
var flipView = element.querySelector(".itemdetails").winControl;
var itemTemplate = element.querySelector(".itemtemplate");
flipView.itemTemplate = element.querySelector(".itemtemplate");
flipView.itemDataSource = Data.getItemsFromGroup(item.group);
flipView.layout = new WinJS.UI.Layout();
}
});
})();
Thank you!
