locked
Still missing something about binding RRS feed

  • Question

  • So I am writing some simple sample code for the new Mobile Services, although this would apply to any service call.

    My HTML is straight from Blend, except I took out the itemDataSource:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>CloudNotes</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>
        <script src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
    
        <!-- CloudNotes references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    	<script type="text/javascript">WinJS.UI.processAll();</script>
    	<script src="sampleData.js" type="text/javascript"></script>
    </head>
    <body>
    	<div class="sampleListViewItemTemplate" data-win-control="WinJS.Binding.Template">
    		<div>
    			<div data-win-bind="innerText:text"></div>
    		</div>
    	</div>
    	<div data-win-control="WinJS.UI.ListView" id="SampleDataList" data-win-options="{itemTemplate:select('.sampleListViewItemTemplate')}"></div>
    	
    </body>
    </html>

    Then, in the JS I set the binding source when the call to mobile services is done.

    (function () {
        "use strict";
    
        WinJS.Binding.optimizeBindingReferences = true;
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
        "https://pointnotepad.azure-mobile.net/",
        "UQumkjaBjjGsfdgsevwecLKKZtzcudr53");
        var bindingData;
        app.onactivated = function (args) {
            client.getTable("Notes").read().done(function (result) {
                bindingData = new WinJS.Binding.List(result);
                document.getElementById("SampleDataList").itemDataSource = bindingData;
            });
        };
    
        app.start();
    
    })();

    Why doesn't the listview refresh when it gets a new binding source? I would think that would be the default behavior.

    Thanks!

    S


    Check out my new C# 2010 All In One for Dummies book at Amazon!


    Wednesday, August 29, 2012 12:53 AM

Answers

  • Hi Bill,

    No process all is not the full answer.  You cannot access any WinJS created controls until processAll completes that promise.

    You also need to wait for the WinJS call to finish and in the done( ) wire up the datasource and attach it to the listview.

    So... A good way to do that is so in the processAll promise, kick off the xhr and then in the completion of the XHR promise wire it all up!

    Make sense?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, September 5, 2012 2:24 PM
    Moderator

All replies

  • Have you checked out the way the sample app created for you from Mobile Services does this?  It will save you a lot of reverse engineering effort if you inspect these!


    Jeff Sanders (MSFT)

    Wednesday, August 29, 2012 8:31 PM
    Moderator
  • I think you're missing the winControl reference to access the metro control:

    document.getElementById("...").winControl.itemDataSource = ... ;


    Luis Abreu

    Thursday, August 30, 2012 9:05 PM
  • Good catch!

    Jeff Sanders (MSFT)

    Friday, August 31, 2012 4:54 PM
    Moderator
  • Nope, if I add that I get 'JavaScript runtime error: Object doesn't support property or method 'createListBinding''

    S


    Check out my new C# 2010 All In One for Dummies book at Amazon!

    Wednesday, September 5, 2012 2:06 PM
  • The problem isn't Mo9bile Services per se. It's getting ANY data from a service and making sure the UI waits until the data comes back.  Is WinJS.UI.processAll the answer?

    S


    Check out my new C# 2010 All In One for Dummies book at Amazon!

    Wednesday, September 5, 2012 2:07 PM
  • Hi Bill,

    No process all is not the full answer.  You cannot access any WinJS created controls until processAll completes that promise.

    You also need to wait for the WinJS call to finish and in the done( ) wire up the datasource and attach it to the listview.

    So... A good way to do that is so in the processAll promise, kick off the xhr and then in the completion of the XHR promise wire it all up!

    Make sense?

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, September 5, 2012 2:24 PM
    Moderator
  • How about the reverse? Kick off the ProcessAll in the XHR call and wire up in side there?

        var flightSearchService = new Service.FlightSearch(Data.baseServiceAddress, 'schedule', 'DFW', 'SHV', new Date(2012, 9, 22, 15, 0, 0, 0));
        flightSearchService.getFlightSchedule().done(function (result) {
            if (result) {
                sampleData = new WinJS.Binding.List(result)
                groupedList = sampleData.createGrouped(getGroupKey, getGroupData, compareGroups);
            } else {
                sampleData = new WinJS.Binding.List();
            }
            WinJS.UI.processAll().done(function () {
                var lv = document.getElementById('sampleLv').winControl;
                lv.itemDataSource = sampleData.dataSource;
            });
        })
    Seems to work. Is it kosher?

    S


    Check out my new C# 2010 All In One for Dummies book at Amazon!

    Wednesday, September 5, 2012 3:23 PM
  • That would work.

    The only side effect is that any other WinJS controls would not display until after the XHR call.  If this is the only control of concern you are good!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, September 5, 2012 3:24 PM
    Moderator