Win10系列：JavaScript 資料繫結

標籤：添加   個數   檔案   索引   常用   array   預設   初始化   示範   

使用資料繫結可以使頁面中元素的屬性值與資料來源中的資料同步，其中資料來源可以來自資料庫、檔案以及自訂的資料等。在常用的資料繫結方法中，簡單對象綁定是將HTML元素與一個僅包含資料的簡單對象相綁定，模板綁定是使用WinJS庫模板來綁定資料。下面首先介紹簡單對象綁定。

19.3.1 簡單對象綁定

簡單對象綁定是一種基本的綁定類型，可以實現將一個對象中的資料繫結到HTML元素的屬性。下面通過一個樣本來示範如何使用HTML5和JavaScript開發一個實現簡單對象綁定的Windows市集應用程式。在這個應用程式中將一個img控制項與一個包含圖片路徑資訊的對象相綁定，實現在img控制項中顯示圖片。

在Visual Studio 2012中建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為SimpleObjectBinding。接著添加項目中用到的圖片檔案，在項目預設建立的檔案夾images上單擊右鍵，選擇"添加"à"現有項"，在本地檔案夾中選擇五張圖片並添加到項目中。

完成添加圖片的操作後，接下來開啟default.html檔案，在default.html檔案的body元素中定義一個div元素，在其內部定義一個img控制項和一個按鈕，並將img控制項的src屬性與資料來源的PicturePath屬性相邦定，按鈕用於實現圖片切換。程式碼片段如下所示：

<div class="bindingStyle">

<img id="pictureHost" data-win-bind="src:PicturePath" src="#" />

<br />

<button id="NextPictureButton" class="buttonStyle">下一個圖片</button>

</div>

接下來在body元素內添加一個script元素，在其中定義後續代碼中需要用到的變數，程式碼片段如下所示：

<script type="text/javascript">

var i = 0;

var picture = {PicturePath: "/images/老黃瓜瘦肉湯.jpg"}

var pictureArray = new Array("/images/老黃瓜瘦肉湯.jpg", "/images/東北汆白肉.jpg", "/images/冬瓜盅.jpg", "/images/全絲燴魚翅.jpg", "/images/如意北極貝.jpg");

</script>

在上面的代碼中，定義了一個變數i，一個對象picture和一個名為pictureArray的數組。變數i是一個索引；picture對象包含一個PicturePath屬性，用於存放一張圖片的路徑；數組pictureArray中存放了五張圖片的路徑。

下面繼續在script元素中添加代碼，初始化前台img控制項與資料對象的綁定，程式碼片段如下所示：

//將img控制項和picture對象綁定

var pictureHost = document.getElementById("pictureHost");

//初始化picture和img控制項的綁定關係

WinJS.Binding.processAll(pictureHost, picture);

//根據picture對象獲得一個可感知自身資料變化的對象

var bindingSource = WinJS.Binding.as(picture);

在上面的代碼中，首先調用document對象的getElementById 函數獲得id屬性值為pictureHost的元素對象，賦值給pictureHost變數，並使用WinJS.Binding.processAll函數初始化元素對象和picture對象的綁定關係。接著調用WinJS.Binding.as函數以picture對象為參數獲得一個名為"bindingSource"的對象，這個對象具有與picture對象相同的屬性和屬性值，並且可以感知自身屬性的變化。在程式運行過程中bindingSource對象的PicturePath屬性值變化時，與picture對象相綁定的元素對象的src屬性值也將隨之改變。

接下來仍然繼續在script元素中添加代碼，為"下一個圖片"按鈕註冊單擊事件處理函數，當單擊這個按鈕時，img控制項將顯示pictureArray數組中的下一個圖片。程式碼片段如下所示：

document.getElementById("NextPictureButton").onclick = function () {

if (i < pictureArray.length) {

//將下一張圖片的地址賦給PicturePath屬性

bindingSource.PicturePath = pictureArray[i];

} else {

//顯示完最後一張圖片後，再從第一張開始

i = 0;

bindingSource.PicturePath = pictureArray[i];

}

i++;

}

在上面的代碼中，首先調用document對象的getElementById函數獲得id屬性值為NextPictureButton的元素對象，並為這個元素對象註冊單擊事件處理函數。在事件處理函數內，判斷變數i的值，如果i小於pictureArray數組元素的個數，那麼將pictureArray[i]元素中儲存的圖片路徑賦值給bindingSource對象的PicturePath屬性，否則設定變數i的值為0，並將pictureArray數組第一個元素中的圖片路徑賦值給bindingSource對象的PicturePath屬性，最後把i在每次點擊時加1。

為了控制default.html頁面中圖片和按鈕的顯示位置，在default.css檔案中設計相應的樣式，程式碼片段如下所示：

/*設定class屬性值為bindingStyle的元素的邊距*/

.bindingStyle {

margin-left: 100px;

margin-top: 100px;

}

/*設定class屬性為buttonStyle的元素的邊距*/

.buttonStyle {

margin-top: 10px;

margin-left: 30px;

}

在上面的代碼中，使用default.html頁面中div元素的class屬性值bindingStyle設定了圖片和按鈕相對於應用程式介面的位置，通過按鈕的class屬性值buttonStyle設定了按鈕相對於圖片的位置。

啟動調試，初始介面中顯示的是"老黃瓜瘦肉湯"圖片，19-10所示。單擊"下一張"按鈕，會變換到下一張圖片"東北汆白肉"，19-11所示。這樣連續單擊按鈕，實現不同圖片之間的切換。當切換到最後一張圖片時，再次單擊按鈕又會回到第一張圖片"老黃瓜瘦肉湯"。

圖19-10 應用程式初始顯示的圖片 圖19-11 單擊"下一張"按鈕後顯示的圖片

Win10系列：JavaScript 資料繫結