locked
headerTemplate in the Grid Project Template - what does it bound to?

    Question

  • I created a new Grid project using the project template (File -> New Project -> Grid Application)

    Inside the file groupedItemsPage.html there is the following template:

        <div class="headerTemplate" data-win-control="WinJS.Binding.Template">
            <h2 class="group-title" data-win-bind="onclick: click; textContent: title" role="link"></h2>
        </div>

    This template is the header of each group of the data, and *SHOULD* correspond to the dummy data that's defined in data.js

        var sampleGroups = [
            { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
            { key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
            { key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
            { key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
            { key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
            { key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
        ];


    however, if I change the template to this:

        <div class="headerTemplate" data-win-control="WinJS.Binding.Template">
            <h2 class="group-title" data-win-bind="onclick: click; textContent: title" role="link"></h2>
    		<h2 class="group-title" data-win-bind="onclick: click; textContent: subtitle" role="link"></h2>
        </div>

    the second h2's data-binding doesn't do what I expect it to. instead of showing the subtitle of the group, it just says "undefined".

    What am i doing wrong?


    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt


    • Edited by Elad R Katz Tuesday, May 08, 2012 2:16 PM added images
    Tuesday, May 08, 2012 2:12 PM

Answers

All replies

  • Well apparently this is a bug in Consumer Preview.

    http://blogs.microsoft.co.il/blogs/eladkatz @ElatKt

    • Marked as answer by Elad R Katz Tuesday, May 08, 2012 9:24 PM
    Tuesday, May 08, 2012 9:24 PM
  • You can make your scenario work by modifying the groupDataSelector function in the groupedItemsPage.js

     ...
    
    // This function is used in updateLayout to select the data to display
            // from an item's group.
            groupDataSelector: function (item) {
                return {
                    title: item.group.title,
                    subtitle: item.group.subtitle, //<--Add this
                    click: function () {
                        nav.navigate("/html/groupDetailPage.html", { group: item.group });
                    }
                }
            },
    
    ...

    Tuesday, May 08, 2012 11:10 PM