首頁 > 開發者 > JavaScript
標籤：add 賦值 sdn 如何 技術 ima script using idt
WinJS庫模板提供了一種格式化顯示多條資料的便捷方式，通過這種方式可以將模板與ListView或FlipView等控制項結合使用以控制資料的顯示格式。定義一個WinJS庫模板的方法與定義WinJS庫控制項的方法相似：在頁面中添加一個div元素，將div元素的data-win-control屬性設定為WinJS.Binding.Template。定義WinJS庫模板以後，需要在WinJS庫模板內部添加控制項以顯示繫結資料，WinJS庫模板內部只能有一個根項目，當綁定多條資料時，需要在WinJS庫模板內部首先定義一個根項目，然後在根項目內添加控制項。下面通過一個樣本來示範如何使用WinJS模板綁定資料並將資料在ListView控制項中顯示。
在Visual Studio 2012中建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為BindingUsingTemplate。接著添加項目中用到的圖片檔案，在項目預設建立的檔案夾images上單擊右鍵，選擇"添加"à"現有項"，在本地檔案夾中選擇六張圖片並添加到項目中。
完成添加圖片的操作後，接下來開啟default.js檔案，在這個檔案的匿名函數內"var activation = Windows.ApplicationModel.Activation;"語句的後面定義一個WinJS.Binding.List類的對象，並儲存在變數foodDetail中用於定義資料來源集合，向WinJS.Binding.List的建構函式傳遞一個參數數組，數組中包含菜肴名稱和菜肴圖片資訊以對資料來源集合進行資料初始化。程式碼片段如下所示：
var foodDetail = new WinJS.Binding.List([
{ name: "冰梅鴨掌", picture: "/images/冰梅鴨掌.jpg" },
{ name: "東北汆白肉", picture: "/images/東北汆白肉.jpg" },
{ name: "冬瓜盅", picture: "/images/冬瓜盅.jpg" },
{ name: "老黃瓜瘦肉湯", picture: "/images/老黃瓜瘦肉湯.jpg" },
{ 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 使用模板綁定資料的效果
Win10系列：JavaScript 模板綁定
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
