locked
WinJS.UI.ListView data items pop up to the upper left of the list when loading complex templates RRS feed

  • Question

  • When a listview's item template gets too complicated (How to define what is "too complicate," I do not know,) I have an issue where the data item templates from the list view will flicker to the upper left hand corner of the element while the items are loading. This looks quite ugly, but nothing I have tried has been able to mask the flickering. I have used HTML templates, a template function that renders a WinJS.Binding.Template programatically, and just building my template in code without using a WinJS.Binding.Template, all to no avail. This seems to be related to the issue in another thread that I can't link to because my account is not "verified."

    Here are some screenshots of the problem as it occurs:

    When the page initially loads, blank templates appear in the upper left, but eventually, the templates start coming out partially rendered. (I would post some images, but apparently my account is not "verified.")

    home.css:

    #squareList {
        height: 600px;
    }
    
        #squareList .win-horizontal.win-viewport .win-surface {
            margin-top: 5px;
            margin-bottom: 88px;
            margin-left: 45px;
            margin-right: 120px;
        }
    
        #squareList .win-container {
            background-color: rgb(255, 255, 255);
        }

    home.html: The template:

                <div id="squareTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
                    <div id="squareSquare" style="height:100px; width:100px" data-win-bind="style.background:colour">
                        <h2 data-win-bind="innerText: id"></h2>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                        <div style="display:-ms-flexbox;"><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div><div>div</div></div>
                    </div>
                </div>
    These data items have been made overly complex for demonstration purposes, but I have had this issue occur with normal data items, especially ones with a flex box and/or a lot of divs. I would like to know if there is any way to keep the data items from appearing until after they have fully rendered. This happens the same way even if I use the template function, so is there some other method I can use? Thank you.
    Monday, January 7, 2013 4:33 PM

All replies

  • Hi,

    Please try to debug with VS2012.

    #Quickstart: Debugging apps (JavaScript)

    http://msdn.microsoft.com/en-us/library/windows/apps/hh441474.aspx


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, January 8, 2013 8:29 AM
  • Could you be a little more specific as to how the debugger can help me figure out what is causing the delay, please? I profiled the app and it looks like there are a ton of calls to "appendChild," which I assume is happening when the templates render. Is there some way to hide the elements until the template is completely done rendering so I can only make them appear when they're finished? The template.winControl.render function seems to be continuing before the template is completely rendered, though I admit my understanding of this is somewhat limited.
    Tuesday, January 8, 2013 2:46 PM