Windows Store App JavaScript 開發：模板綁定
WinJS庫模板提供了一種格式化顯示多條數據的便捷方式，經過這種方式能夠將模板與ListView或FlipView等控件結合使用以控制數據的顯示格式。定義一個WinJS庫模板的方法與定義WinJS庫控件的方法類似：在頁面中添加一個div元素，將div元素的data-win-control屬性設置爲WinJS.Binding.Template。定義WinJS庫模板之後，須要在WinJS庫模板內部添加控件以顯示綁定的數據，WinJS庫模板內部只能有一個根元素，當綁定多條數據時，須要在WinJS庫模板內部首先定義一個根元素，而後在根元素內添加控件。下面經過一個示例來演示如何使用WinJS模板綁定數據並將數據在ListView控件中顯示。css
在Visual Studio 2012中新建一個JavaScript的Windows應用商店的空白應用程序項目，將其命名爲BindingUsingTemplate。接着添加項目中用到的圖片文件，在項目默認新建的文件夾images上單擊右鍵，選擇「添加」à「現有項」，在本地文件夾中選擇六張圖片並添加到項目中。html
完成添加圖片的操做後，接下來打開default.js文件，在這個文件的匿名函數內「var activation = Windows.ApplicationModel.Activation;」語句的後面定義一個WinJS.Binding.List類的對象，並保存在變量foodDetail中用於定義數據源集合，向WinJS.Binding.List的構造函數傳遞一個參數數組，數組中包含菜餚名稱和菜餚圖片信息以對數據源集合進行數據初始化。代碼片斷以下所示： windows
var foodDetail = new WinJS.Binding.List([數組
{ name: "冰梅鴨掌", picture: "/images/冰梅鴨掌.jpg" },app
{ name: "東北汆白肉", picture: "/images/東北汆白肉.jpg" },函數
{ name: "冬瓜盅", picture: "/images/冬瓜盅.jpg" },佈局
{ name: "老黃瓜瘦肉湯", picture: "/images/老黃瓜瘦肉湯.jpg" },spa
{ name: "牛肉皮蛋粥", picture: "/images/牛肉皮蛋粥.jpg" },設計
{ name: "全絲燴魚翅", picture: "/images/全絲燴魚翅.jpg" }調試
]);
因爲這裏將定義WinJS.Binding.List類的對象的代碼放在了default.js文件的匿名函數內，因爲匿名函數中定義的變量爲局部變量，不能直接使用在項目的其餘文件中，爲此在「app.start();」語句的後面聲明一個命名空間，代碼片斷以下所示：
WinJS.Namespace.define("BindingUsingTemplate",{
foodDetailName: foodDetail
});
在上面的代碼中，調用WinJS.Namespace.define函數聲明瞭一個命名空間BindingUsingTemplate，在命名空間中添加了一個名爲foodDetailName的成員，並將foodDetailName成員的值設置爲變量foodDetail。
接下來打開default.html文件，在其中添加WinJS庫模板和ListView控件，WinJS庫模板用於設置數據的顯示格式，而ListView控件用於顯示數據。代碼片斷以下所示：
<body>
<div id="FoodTemplate" data-win-control="WinJS.Binding.Template">
<div class="itemStyle">
<img src="#" class="pictureStyle" data-win-bind="src: picture" />
<h4 class="titleStyle" data-win-bind="innerText: name"></h4>
</div>
</div>
<div data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource: BindingUsingTemplate.foodDetailName.dataSource,
itemTemplate: FoodTemplate,
layout: { type: WinJS.UI.GridLayout }
}">
</div>
</body>
上面的代碼將body元素中的內容分爲兩部分，第一部分定義了一個WinJS庫模板，首先添加一個div元素，設置div元素的id屬性值爲FoodTemplate，並經過爲div元素的data-win-control屬性賦值WinJS.Binding.Template，添加一個WinJS庫模板。接着在WinJS庫模板內部添加一個img控件和一個文本控件，並將img控件的src屬性與數據源中數據對象的picture屬性相綁定，將文本控件的innerText屬性與數據源中數據對象的name屬性相綁定。
接下來在第二部分定義了一個ListView控件，首先添加了一個div元素，經過爲div元素的data-win-control 屬性賦值WinJS.UI.ListView定義一個ListView控件，並設置ListView控件的數據源爲BindingUsingTemplate 命名空間下的foodDetail對象的dataSource屬性的值。最後將ListView控件的模板設置爲上面定義的id屬性值爲FoodTemplate的WinJS庫模板，並將ListView控件的layout屬性賦值爲{ type: WinJS.UI.GridLayout }，設置以網格佈局方式顯示數據。
爲了控制界面元素的顯示位置和外觀，在default.css文件中設置相應的樣式屬性，代碼片斷以下所示：
/*設置class屬性值爲itemStyle的元素的大小、邊距等屬性*/
.itemStyle {
width: 282px;
height: 140px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
/*設置class屬性值爲pictureStyle的元素的大小、邊距、位置等屬性*/
.itemStyle .pictureStyle {
width: 120px;
height: 120px;
margin: 10px;
-ms-grid-column: 1;
}
/*設置class屬性值爲titleStyle的元素的邊距、位置等屬性*/
.itemStyle .titleStyle {
margin: 5px;
-ms-grid-column: 2;
}
上面的代碼分爲三個部分，分別設計了菜餚總體信息、菜餚圖片、菜餚名稱的樣式。
啓動調試，能夠看到在應用程序界面上以網格佈局方式顯示圖片和文本，效果如圖19-12所示。
圖19-12 使用模板綁定數據的效果
- 1. Windows Store App JavaScript 開發：頁內導航
- 2. KnockoutJS-模板綁定
- 3. Windows Store App Image開發示例
- 4. Windows Store App, Shaken
- 5. 從新想象 Windows 8 Store Apps (55) - 綁定: MVVM 模式
- 6. Windows Store App 圖像
- 7. Knockout應用開發指南 第四章：模板綁定
- 8. 蘋果開發者App Store綁定連連跨境支付收款教程！
- 9. Windows Store App 過渡動畫
- 10. WPF綁定數據模板
- 更多相關文章...
- • WSDL 綁定 - WSDL 教程
- • Maven 項目模板 - Maven教程
- • PHP開發工具
- • 委託模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。