Databinding to the local scope RRS feed

  • Question

  • I had a reader bring this up and I don't have a good answer.

    All of the databinding samples use the global scope or a WinJS namespace. What if you just want to bind to a variable in the page's local scope?

    For instance:

    1) Open a project in Blend

    2) Add a new pagecontrol called listItems

    3) Add the Listview with Sample Data from the Assets

    4) return to Visual Studio.

    5) Take the code from sample.js and add it to the itemList.js file, so it looks like this:

    (function () {
        //Create sample data using a list
        var sampleData = new WinJS.Binding.List([
    				{ name: 'sampleONE', groupName: 'group1' },
    				{ name: 'sampleTWO', groupName: 'group1' },
    				{ name: 'sampleTHREE', groupName: 'group2' },
    				{ name: 'sampleFOUR', groupName: 'group2' },
    				{ name: 'sampleFIVE', groupName: 'group2' }
        // Create the groups for the ListView from the item data and the grouping functions
        var groupedList = sampleData.createGrouped(getGroupKey, getGroupData, compareGroups);
        // Function used to sort the groups
        // Note: This is similar to default sorting behavior 
        //   when using WinJS.Binding.List.createGrouped()
        function compareGroups(left, right) {
            return left - right;
        // Function which returns the group key that an item belongs to
        function getGroupKey(dataItem) {
            return dataItem.groupName;
        // Function which returns the data for a group
        function getGroupData(dataItem) {
            return {
                groupName: dataItem.groupName
        WinJS.UI.Pages.define("/pages/mapDetail.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.
            unload: function () {
                // TODO: Respond to navigations away from this page.
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
                // TODO: Respond to changes in viewState.

    6) set the listview.html page as the start page in the package.appmanifest

    7) Run the program. The sample data is no longer shown.

    I assume that the ListView can no longer find the variable with the binding set up, but I can't imagine why.

    <div data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource:sampleData.dataSource, itemTemplate:select('.sampleListViewItemTemplate')}"></div>

    Any thoughts on how to accomplish this?


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

    Wednesday, September 5, 2012 2:13 PM


All replies

  • Hi Bill,

    The templates all do this when you create a grid app for example.

    You need to expose the sampleData outside the scope of the anonymous local function.

    The quickstart for ListView has an example of how this is done in detail:


    In general, the quickstarts are a great reference for these types of questions.

    Also, you should familiarize yourself with this article which will for the basis of how to deal with Global Namespace objects and collisions (among other things): http://msdn.microsoft.com/en-us/library/windows/apps/Hh781219.aspx



    Jeff Sanders (MSFT)

    Wednesday, September 5, 2012 3:33 PM
  • I had noticed that the quickstarts either all left it in the Global scope or used a namespace. Fascinating! Thanks for the insight.


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

    Wednesday, September 5, 2012 4:03 PM