Windows App Development - ListView retrieving data

Question

I am new to Windows App Development and I am trying to create a ListView in order to understand how it works. My problem is that I am trying to use a namespace on my ListView div and it returns the error saying that the property dataSource doesn't exist.

This is my html and javascript:



    // For an introduction to the Page Control template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232511
    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/episodes/episodes.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.
                Episodes.Data.assignItems(items);
                WinJS.UI.processAll();
            },

            unload: function () {
                // TODO: Respond to navigations away from this page.
            },

            updateLayout: function (element) {
                /// <param name="element" domElement="true" />

                // TODO: Respond to changes in layout.
            },

        });

        WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: undefined,

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

        var items = [
            { title: 'Air Gear' },
            { title: 'Bakuman' }
        ];

    })();
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>episodes</title>

        <link href="episodes.css" rel="stylesheet" />
        <script src="episodes.js"></script>
    </head>
    <body>
        <div class="episodes fragment">
            <header class="page-header" aria-label="Header content" role="banner">
                <button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to episodes</span>
                </h1>
            </header>
            <section class="page-section" aria-label="Main content" role="main">
                <div data-win-control="WinJS.UI.ListView" data-win-options="{
                     itemDataSource : Episodes.Data.itemsBindingList.dataSource
                     }"></div>
            </section>
        </div>
    </body>
    </html>

Since I am using an anonymous function on my .js file, I created a namespace that I can use on the .html file. Inside the ListView div, I have this:

div data-win-control="WinJS.UI.ListView" data-win-options="{
             itemDataSource : Episodes.Data.itemsBindingList.dataSource
             }"></div>

I am using the namespace to retrieve my data that I want to show on the ListView. My problem is that I get an error saying:

"{\"exception\":null,\"error\":{\"description\":\"It's not possible to obtain the property 'dataSource' of undifined or null reference\"

Have you tried setting your itemsBindingList to an empty WinJS.Binding.List initially, then add the items in assignItems? — jayrenn, Jul 22 '15 at 16:38

score 0 · Accepted Answer · answered Jul 24 '15 at 19:12

From what I can tell it is the fact that your property is initially undefined:

WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: undefined, //this is a problem

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

Your html is then trying to bind to a property of an undefined object:

<section class="page-section" aria-label="Main content" role="main">
                <div data-win-control="WinJS.UI.ListView" data-win-options="{
                     itemDataSource : Episodes.Data.itemsBindingList.dataSource
                     }"></div>
            </section>

Either try using an empty array to initialize:

WinJS.Namespace.define("Episodes.Data", {
            itemsBindingList: new WinJS.Binding.List([]),

            assignItems: function (items) {
                Episodes.Data.itemsBindingList = new WinJS.Binding.List(items);
            },
        });

Or you can set the datasource in your code:

ready: function (element, options) {
                // TODO: Initialize the page here.
                var listView = document.getElementById('myListView').winControl;
                Episodes.Data.assignItems(items);
                listView.data = Episodes.Data.itemsBindingList;
                WinJS.UI.processAll();
            },

You can verify this by debugging in the ready function and your exception should come before your breakpoint gets hit.

I figured it out already, but thanks for the answer. You could help me here if you want, thought... http://stackoverflow.com/questions/31627362/winjs-autosuggestbox-doesnt-render-properly — Marcelo Perrella, Jul 25 '15 at 15:47

Windows App Development - ListView retrieving data

1 Answers1