Bonjour à tous,
Voici le code qui m'a permis de créer un Template dynamiquement:
groupedItemsPage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>groupedItemsPage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet">
<link href="/css/groupedItemsPage.css" rel="stylesheet">
<script src="/js/data.js"></script>
<script src="/js/groupedItemsPage.js"></script>
</head>
<body>
<!-- These templates are used to display each item in the ListView declared below. -->
<div class="itemtemplate-large" data-win-control="WinJS.Binding.Template">
<div class="item-container" data-win-control="Curioos.Tools.DelayImageLoader">
<img class="item-image" src="#" data-win-bind="src: image" width="400" height="400"/>
</div>
</div>
<div class="itemtemplate-small" data-win-control="WinJS.Binding.Template">
<div class="item-container" data-win-control="Curioos.Tools.DelayImageLoader">
<img class="item-image" src="#" data-win-bind="src: image" width="190" height="190"/>
</div>
</div>
<div class="itemtemplate-landscape" data-win-control="WinJS.Binding.Template">
<div class="item-container" data-win-control="Curioos.Tools.DelayImageLoader">
<img class="item-image" src="#" data-win-bind="src: image" width="400" height="380"/>
</div>
</div>
<!-- The content that will be loaded and displayed. -->
<div class="fragment groupeditemspage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">DynamicTemplate</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
</section>
</div>
</body>
</html>
groupedItemsPage.css
.groupeditemspage .groupeditemslist {
height: 100%;
position: relative;
width: 100%;
z-index: 0;
}
data.js
(function () {
"use strict";
var images = {
large: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC",
small: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC",
landscape: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC"
};
var templateFormat = {
template1: ["large", "small", "small", "small", "small", "landscape", "landscape", "small", "small", "small"],
template2: ["small", "large", "small", "landscape", "small", "small", "small", "landscape", "small", "small"]
}
var containerSize = {
large: { width: "400px", height: "400px" },
small: { width: "190px", height: "190px" },
landscape: { width: "398px", height: "190px" }
}
var sampleItems = [
{ id: 0, title: "Item1", content: "Content1" },
{ id: 1, title: "Item2", content: "Content2" },
{ id: 2, title: "Item3", content: "Content3" },
{ id: 3, title: "Item4", content: "Content4" },
{ id: 4, title: "Item5", content: "Content5" },
{ id: 5, title: "Item6", content: "Content6" },
{ id: 6, title: "Item7", content: "Content7" },
{ id: 7, title: "Item8", content: "Content8" },
{ id: 8, title: "Item9", content: "Content9" },
{ id: 9, title: "Item10", content: "Content10" },
{ id: 10, title: "Item11", content: "Content11" },
{ id: 11, title: "Item12", content: "Content12" },
{ id: 12, title: "Item13", content: "Content13" },
{ id: 13, title: "Item14", content: "Content14" },
{ id: 14, title: "Item15", content: "Content15" },
{ id: 15, title: "Item16", content: "Content16" },
{ id: 16, title: "Item17", content: "Content17" },
{ id: 17, title: "Item18", content: "Content18" },
{ id: 18, title: "Item19", content: "Content19" },
{ id: 19, title: "Item20", content: "Content20" }
];
var list = new WinJS.Binding.List();
function buildItems() {
var counter = 0;
var swap = false;
var template = templateFormat.template1;
sampleItems.forEach(function (item) {
if (counter > 9) {
swap = !swap;
template = swap ? templateFormat.template2 : templateFormat.template1;
counter = 0;
}
list.push({
title: item.title,
image: images[template[counter]],
format: template[counter]
});
counter++;
});
};
buildItems();
WinJS.Namespace.define("data", {
items: list,
containerSize: containerSize
});
})();
groupedItemsPage.js
(function () {
"use strict";
var appView = Windows.UI.ViewManagement.ApplicationView;
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var ui = WinJS.UI;
ui.Pages.define("/html/groupedItemsPage.html", {
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
ui.setOptions(listView, {
itemTemplate: this.itemRenderer.bind(this)
});
this.updateLayout(element, appView.value);
},
updateLayout: function (element, viewState) {
var listView = element.querySelector(".groupeditemslist").winControl;
if (viewState === appViewState.snapped) {
} else {
ui.setOptions(listView, {
itemDataSource: data.items.dataSource,
layout: new ui.GridLayout({
maxRows: 3,
groupHeaderPosition: "top",
groupInfo: function () {
return {
multiSize: true,
slotWidth: 200,
slotHeight: 200
};
}
})
});
}
},
itemRenderer: function (itemPromise) {
return itemPromise.then(function (currentItem, recycled) {
var template = document.querySelector(".itemtemplate-" + currentItem.data.format).winControl.renderItem(itemPromise, recycled);
template.renderComplete = template.renderComplete.then(function (elem) {
elem.querySelector(".item-container").style.width = data.containerSize[currentItem.data.format].width;
elem.querySelector(".item-container").style.height = data.containerSize[currentItem.data.format].height;
});
return template.element;
})
}
});
})();
Générer un template dynamiquement
