Why FlipView does not work with navigation project? RRS feed

  • Question

  • If I add a flipview to the new blank JS project, then it works but whenI make the same changes in the navigation project, it does not. (The changes are literally same).

    Don't believe me? OK try this:

    I created a new navigation project in Javascript/HTML. After that, I changed home.html and home.js to include a flipview, very bare minimum changes.

    The home.html looks like: (Changes marked in between comments)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>homePage</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> <link href="/css/default.css" rel="stylesheet" /> <link href="/pages/home/home.css" rel="stylesheet" /> <script src="/pages/home/home.js"></script> </head> <body> <!-- The content that will be loaded and displayed. --> <div class="fragment homepage"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Welcome to App2!</span> </h1> </header> <section aria-label="Main content" role="main">

    <!-- Changes for flipview (START) --> <div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> <img class="image" data-win-bind="src: picture; alt: title" /> </div> <div id="simple_FlipView" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource: DefaultData.bindingList.dataSource, itemTemplate: simple_ItemTemplate }"> </div>

    <!-- Changes for flipview (END) --> </section> </div> </body> </html>

    and the home.js is like this:

    (function () {
        "use strict";
        var array = [
            { title: "Grapes", picture: "images/logo.png" },
            { title: "Rainier", picture: "images/smalllogo.png" },
            { title: "Sunset", picture: "images/splashscreen.png" },
            { title: "Valley", picture: "images/storelogo.png" }
        var bindingList = new WinJS.Binding.List(array);
        WinJS.Namespace.define("DefaultData", {
            bindingList: bindingList,
            array: array
        var e = DefaultData.bindingList.dataSource;
        WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.

    And surprisingly, flipview does not show images. It renders the JSON text instead.Could anybody please let me know what is going wrong here? It is a very simple code and should have worked.

    • Edited by John Rick Thursday, September 13, 2012 3:19 PM
    Thursday, September 13, 2012 3:04 PM


All replies