locked
Binding a FlipView to a data sources causes it to flicker on initial load RRS feed

  • 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)

    Thursday, November 8, 2012 2:32 PM
    Moderator

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 AM
    Moderator
  • 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&section=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


    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)

    Thursday, November 8, 2012 2:32 PM
    Moderator
  • 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)

    Monday, January 28, 2013 1:21 PM
    Moderator