Nested FlipView in a ListView


  • I have a ListView that displays articles by using a different Templates.
    I'm using a render function to choose the correct template.

    Some articles may contain an image gallery, which i want to display using a FlipView inside the ListView.
    I tried to include a FlipView inside a Template, but i'm having troubles with creating and binding the gallery dataSource with the FlipView.

    An article item looks like that :

    "title" : "text...",
    "subtitle" : "more text...",
    "gallery" : [ {item1}, {item2} ..... ]

    The templates of the article with a nested FlipView :

    <!-- Article Gallery item -->
            <div id="articleGalleryItemTemplate" data-win-control="WinJS.Binding.Template">
                    <div class="articleGallery newsItem">
                        <div data-win-bind="textContent:category"></div>
           <div class="flipview" data-win-control="WinJS.UI.FlipView" 
                                              data-win-options="{itemTemplate : select('#articleGalleryFlipviewItem')}"
                                              data-win-bind="winControl.itemDataSource : gallery converterFunc"></div>

    1. I managed to bind a a data source by using a converter function (ex' : data-win-bind="winControl.itemDataSource : gallery converterFunc")
    But, is that a good idea ?

    2. After the gallery FlipView renders, it does not displays the first element but only after i flip to the next item in the gallery.

    3. When i flip to the element it invokes the ListView.itemInvoked event. How can i prevent it ?

    Sunday, August 19, 2012 9:34 PM


All replies