Answered by:
Binding a FlipView to a data sources causes it to flicker on initial load

Question
-
I have a simple application that contains a flip that has a data source assigned. Currently, it just displays a text view of an object.
The problem is when the application loads, it almost seems like flipview getting updated twice, resulting in a flicker, where the same element gets animated twice.
Is it a known problem with a flipview? Are there any workarounds?
Wednesday, October 24, 2012 6:23 AM
Answers
-
Hi Alex,
I messed with this for a while and found jQuery is causing this. Just including the library in default.html is enough to cause problems. Remove jQuery from your code and you should be fine!
-Jeff
Jeff Sanders (MSFT)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Thursday, November 8, 2012 2:32 PM
- Marked as answer by Song Tian Friday, November 9, 2012 6:17 AM
Thursday, November 8, 2012 2:32 PMModerator
All replies
-
Hi Alex,
Can you post a very simple example project that shows this behavior? Without it, there is no way to tell what could be the problem, or how we may be able to help.
-Jeff
Jeff Sanders (MSFT)
Wednesday, October 24, 2012 11:50 AMModerator -
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
- Edited by Alex A. Kalinin Wednesday, November 7, 2012 4:37 PM
Thursday, October 25, 2012 4:17 AM -
Jeff, did you get a chance to take a look?
Thanks, Alex
Saturday, October 27, 2012 7:08 PM -
Any advice? I'm still stuck on it...Tuesday, November 6, 2012 5:03 PM
-
Hi Alex,
I messed with this for a while and found jQuery is causing this. Just including the library in default.html is enough to cause problems. Remove jQuery from your code and you should be fine!
-Jeff
Jeff Sanders (MSFT)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Thursday, November 8, 2012 2:32 PM
- Marked as answer by Song Tian Friday, November 9, 2012 6:17 AM
Thursday, November 8, 2012 2:32 PMModerator -
Wow, Jeff. Good find. I redesigned my app not to use the FlipView as a result, since jquery is essential for the rest of the app code. Is it possible to report a bug for the team developing flipview code with my example?Friday, January 25, 2013 10:21 PM
-
Hi Alex,
The bug is in jQuery so you would need to contact them and file a bug with them using your code as the repro.
-Jeff
Jeff Sanders (MSFT)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, January 28, 2013 1:21 PM
Monday, January 28, 2013 1:21 PMModerator