Grid Template

Aug 15, 2014 at 12:28 PM
I 'm working with grid template in HTML5/javascript .After dissecting the complete code one thing i didn't got is that from where does this data is getting bind in this code below.
 //code   groupeditems.html
<div class="headertemplate" data-win-control="WinJS.Binding.Template">
        <button class="group-header win-type-x-large win-type-interactive" data-win-bind="groupKey: key"         onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" role="link" tabindex="-1" type="button">
            <span class="group-title win-type-ellipsis" data-win-bind="textContent: title"></span>
            <span class="group-chevron"></span>

        </button>

    </div>
i mean to say there are 2 title property in the sampledata which one is got picked .you might say that it is getting bind from groupeditems.js by the following code.

// code
            var listView = element.querySelector(".groupeditemslist").winControl;
        listView.groupHeaderTemplate = element.querySelector(".headertemplate");
_initializeLayout: function (listView, viewState) {
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
      }
but this doesn't makes sense to me.
Coordinator
Sep 9, 2014 at 8:27 AM
The actual binding is not initialized anywhere in the code you showed actually. I wonder if that's the point of confusion. All of the code you listed is what declares how things should be bound, but the actual binding is done when the UI is processed (from default.js).