Bind list to multiple target divs in WinJS

Question

I have list declared in js file like this (full list contain 6 items, but can be more or less than that)

  var dataArray = [
    {
        type: "item", title: "Cliff",
        picture: "../../images/slike_etnologija/srednji_vek/01.jpg",
        text: "some description"
    },
    {
        type: "item", title: "Grapes",
        picture: "../../images/slike_etnologija/srednji_vek/02.jpg",
        text: "another description"
    },

two templates declared in html file

  <div id="galleryTemplate" data-win-control="WinJS.Binding.Template">
            <div class="overlaidItemTemplate">
                <img class="image img-responsive" src="#" data-win-bind="src: picture; alt: title" />
                <div class="overlay">
                    <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
                </div>
            </div>
        </div>

        <div id="textTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <p data-win-bind="innerText: text"></p>
            </div>
        </div>

and two controls where i need to show data from list

  <div class="col-md-12" id="basicFlipView"
                     data-win-control="WinJS.UI.FlipView"
                     data-win-options="{ itemDataSource : EtnologijaGallery.itemList.dataSource, itemTemplate: galleryTemplate }">
                </div>

   <p data-win-control="WinJS.UI.ListView"
                     data-win-options="{ itemDataSource : EtnologijaGallery.itemList.dataSource, itemTemplate: textTemplate }">
                </p>

I'm trying to show image gallery in flipbox and text description associated to each image in listview next to it. Due to design i can't put both things in same template.

My flipbox works fine, and shows all images, but listview don't work. It shows, first, only 3 descriptions from list, and those 3 descriptions are shown in control with scroll bar, instead changing when user change image in flipbox.

Can someone help me solve this?

I don't fully get what effect do you expect to get with this - when a user moves to the next image using FlipView control, what should happen to the ListView control? — mjzr, Nov 17 '15 at 12:50
When user change picture in flipview, text associated with that picture should be shown in list view. — onedevteam.com, Nov 17 '15 at 12:52

score 1 · Accepted Answer · answered Nov 17 '15 at 12:55

1

As mentioned on http://www.buildwinjs.com/tutorial/2WinJS_Binding/bindingInit/, WinJS Binding is one-time binding and you bound the same array to two separate controls.

I think you should check FlipView's onpageselected event and when that event occurs, update the div with the proper text. I guess the ListView is not needed to be used in this case at all.

answered Nov 17 '15 at 12:55

mjzr

241
1
3
8

I have implemented onpageselect event to my winjs, but it executes only when i navigate on page. Not executing when i change images in flipview. – onedevteam.com Nov 17 '15 at 21:53
According to the doc "`ondatasourcecountchanged` is raised when the number of items in the itemDataSource property changes". – mjzr Nov 18 '15 at 11:10

Bind list to multiple target divs in WinJS

1 Answers1