WinJS flipview control and item template

StackOverflow https://stackoverflow.com/questions/15851983

Question

trying to use the FlipView control in WinJS and having some issues. I am able to bind it to a datasource and get the URL/picture property show up in the flipview control content pane but it fails to load the picture - any suggestions :(

I have made sure that src property of the image tags points to the URL/picture property. I am able to load the image via a normal img tag.

listed below is the template definition and data source - as always, appreciate any pointers :)

datasource: 

var dataArray = [
 { type: "item", title: "Hole 1", picture: "/images/IMG_0550.jpg" },
 { type: "item", title: "Hole 2", picture: "/images/IMG_0564.jpg" },
 { type: "item", title: "Hole 3", picture: "/images/IMG_0572.jpg" },
 { type: "item", title: "Hole 4", picture: "/images/IMG_0594.jpg" },
 { type: "item", title: "Hole 5", picture: "/images/IMG_0605.jpg" }
 ];

var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible. 
WinJS.Namespace.define("ImageData", {
    bindingList: dataList,
    array: dataArray
});

flipview binding:

Gallery content goes here.

      <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
        <div>
            <img src="#" data-win-bind="src: picture; alt: title" />
            <div>
                <h2 data-win-bind="innerText: title"></h2>
            </div>
        </div>
     </div>    

    <div id="basicFlipView" 
         data-win-control="WinJS.UI.FlipView"
         data-win-options="{ itemDataSource : ImageData.bindingList.dataSource, itemTemplate : simple_ItemTemplate }">
    </div>
  </section>
Was it helpful?

Solution

use itemTemplate : select('#simple_ItemTemplate') instead of `itemTemplate : simple_ItemTemplate'

It is good to set template and datasource in code to avoid typo error and code can be debugged also.

basicFlipView.winControl.itemTemplate = simple_ItemTemplate;
basicFlipView.winControl.itemDataSource = dataList;

OTHER TIPS

I do not agree with ankur comment, from my POV, databinding and MVVM is the way to go. About your question, run the project and use DOM explorer to see what get generated, also use a class instead of an id as template identifier (since it gets generated multiple times)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top