iT邦幫忙

7

Day15 關於範本繫結資料 WinJS.Binding.Template

由於前幾個章節,提到了 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>  

1 則留言

0
blackie1019i
iT邦新手 5 級 ‧ 2013-10-01 00:18:34

忙忙愛你

yiying iT邦新手 1 級‧ 2013-10-01 00:22:14 檢舉

謝謝謝謝

我要留言

立即登入留言