locked
Problems getting started with data binding (JavaScript)

    Question

  • Hi there,

    I'm trying to get started with WinJS based store apps but I'm running into trouble with understanding data binding early on.

    I created a new project using the navigation template in VS2013, which creates a default.html that nests a home.html that holds the content.

    I want to craft the UI of the app around sample data that I want to bind in home.html, so I can modify everything in Blend and then swap out the data source with the real data source.

    This is home.html

    ...
    <head>
    ...
        <script src="/pages/home/home.js"></script>
        <script src="/js/sampleData.js"></script>
    </head>
    <body>
        <!-- The content that will be loaded and displayed. -->
    	<div class="fragment homepage">
    		
            <header aria-label="Header content" role="banner">
                <button data-win-control="WinJS.UI.BackButton"></button>
                
    			<div class="titlearea win-type-ellipsis">
                    <div class="pagetitle">
                    	<img alt="title2" src="/images/title2.png">
                    </div>
                </div>
            </header>
            <section aria-label="Main content" role="main">
                <div id="contenthost" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource:listViewDataHomePage.testData}"></div>
            </section>
        </div>
    </body>
    ...
    

    I put the sample data in /js/sampleData.js which is put in the head of home.html:

    var testData = [
        { title: 'TestTitle1', description: 'TestDescription1' },
        { title: 'TestTitle2', description: 'TestDescription2' },
        { title: 'TestTitle3', description: 'TestDescription3' }
    ];
    
    var listViewDataHomePage = new WinJS.Binding.List(testData);

    I expected that to be everything I needed to do, but nothing shows in the control. It should show a raw representation of the data in the control in Blend, but the control stays empty. Also, when I try to add a data template in Blend, the dialog says there is no data binding yet.

    What am I missing?

    Thanks!

    Tobias

    Monday, December 09, 2013 6:16 PM

Answers

  • Hi Tobias,

    Change the value of itemDataSource on the ListView from listViewDataHomePage.testData to listViewDataHomePage.dataSource.

    <div id="contenthost" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource:listViewDataHomePage.dataSource}"></div>

    After that change, refresh the page in Blend and you should see the raw data in the ListView. Then you can create a new ItemTemplate for the ListView and edit the data binding.

    This page has an explanation in the example of why you need to use .dataSource when binding to a List. http://msdn.microsoft.com/en-us/library/windows/apps/hh700703.aspx

    Please reply if you have any other questions.

    Thank you,

    Joel

    Monday, December 09, 2013 7:20 PM

All replies

  • Hi Tobias,

    Change the value of itemDataSource on the ListView from listViewDataHomePage.testData to listViewDataHomePage.dataSource.

    <div id="contenthost" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource:listViewDataHomePage.dataSource}"></div>

    After that change, refresh the page in Blend and you should see the raw data in the ListView. Then you can create a new ItemTemplate for the ListView and edit the data binding.

    This page has an explanation in the example of why you need to use .dataSource when binding to a List. http://msdn.microsoft.com/en-us/library/windows/apps/hh700703.aspx

    Please reply if you have any other questions.

    Thank you,

    Joel

    Monday, December 09, 2013 7:20 PM
  • Thanks, that got me started.

    dataSource is an internal property every JavaScript data structure has in a WinJS context? How does that work exactly? I didn't define dataSource, did I?

    thanks,

    Tobias

    Monday, December 09, 2013 10:00 PM
  • Hi,

    dataSource is a property of the WinJS.Binding.List that you created.

    http://msdn.microsoft.com/en-us/library/windows/apps/hh967818.aspx

    Joel

    Tuesday, December 10, 2013 5:21 AM
  • Hi Joel,

    thanks!

    Tobias

    Monday, December 30, 2013 10:09 PM