由於前幾個章節，提到了 ListView, GridiView, 甚至實作了分割應用程式等等，在這些範例中，
都有用到這個 WinJS.Binding.Template。
有興趣可以參考官方說明：http://msdn.microsoft.com/zh-tw/library/windows/apps/hh700356.aspx
由於前幾個章節，提到了 ListView, GridiView, 甚至實作了 分割應用程式等等，在這些範例中，
都有用到這個 WinJS.Binding.Template，
WinJS.Binding.Template 的背後到底是怎麼實做的，
這個我雖然不清楚，不過目前用起來的感覺很像，如果用php來比喻的話，就是可以一直被 foreach 資料的 html 模組。

不過，要做資料繫結，通常我們必須要有個資料的 Array，定義資料結構與內容，如 workGroups 定義了兩種作品的種類，分別是木雕跟金屬工藝，key這個key，可以先不用管它，name就是作品的種類，avater就是該類別的代表圖片：

var workGroups = [  
            //workGroups replace sampleGroup  
            { key: "1", name: 'Wood Carve Works', avater: "images/cover.jpg" },   //a.k.a workgroups[0]  
            { key: "2", name: 'Metal Craft', avater: "images/2cover.jpg" }      //workgroups[1]  
        ]; 

當然這部分只是定義資料而已，後面還有其它是需要做，不過在此不做說明。

另外在html部分，
你必須有個容器，
負責的工作內容就是 Binging.Template，所以該容器則具有data-win-control="WinJS.Binding.Template"，
包含在這個容器裡面的html標籤，只要是有你需要呈現你自己所定義的key值，就可以使用 data-win-bind的屬性，
比方說 img 標簽我希望圖片的來源(src)的值是 workGroups 的 avater 這個 key 的值。

<img class="item-image" src="#" data-win-bind="src: avater; alt: name" />  

完整的html:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">  
<div class="item">  
    <img class="item-image" src="#" data-win-bind="src: avater; alt: name" />  
    <div class="item-overlay">  
        <h4 class="item-title" data-win-bind="textContent: name"></h4>  
    </div>  
</div>  
</div>