Hi Jeff, thanks for taking a look. Here's the code that consistently produces the flicker on initial load.
default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App2</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>
<!-- App2 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="/js/data.js" type="text/javascript"></script>
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
<div class="sampleFlipViewItemTemplate" data-win-control="WinJS.Binding.Template">
<div>
<h1 data-win-bind="innerText:year"></h1>
<h4 data-win-bind="innerText:description"></h4>
</div>
</div>
<div class="flipview" data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource:Data.items.dataSource, itemTemplate:select('.sampleFlipViewItemTemplate')}"></div>
</body>
</html>
default.js
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
args.setPromise(WinJS.UI.processAll());
}
};
app.start();
})();
data.js
(function () {
var url = 'http://en.wikipedia.org/w/api.php?action=parse&prop=text&format=json§ion=1&page=October_24';
var list = new WinJS.Binding.List();
load();
function load() {
WinJS.xhr({ url: url }).done(function (result) {
var json = JSON.parse(result.responseText);
var payload = json.parse.text['*'];
var items = extract(payload);
for (var i = 0; i < items.length; i++) {
list.push(items[i]);
}
});
}
function extract(text) {
var items = [];
var dom = $(text);
$('li', dom).each(function (i, el) {
var split = el.innerText.split(' - ', 2);
if (split.length === 2) {
var item = {
year: split[0],
description: split[1]
};
items.push(item);
}
});
return items;
}
WinJS.Namespace.define("Data", {
items: list
});
})();
Thanks,
Alex
