Answered by:
ListView Template function as part of PageControl?

-
Hi all,
I am creating a PageNavigation Windows 8 app.
The central page contains a ListView tied against a RESTful data source, and the HTML is rendered by a function.
In my PageControl ready function, I can call a separately defined function in the JavaScript
var page = WinJS.UI.Pages.define("/html/1_ListProducts.html", {
ready: function (element, options) {
console.log("Page ready called for 1_ListProducts.html");
WinJS.UI.processAll().done(function () {
var lvProducts = document.getElementById("listView").winControl;lvProducts.itemTemplate = itemTemplate;
// Bind ListView to web data source
lvProducts.itemDataSource = productsDataSource;
});this.showNavigationHistory();
},The function "itemTemplate" is defined outside of the page definition as in
function itemTemplate(itemPromise) etc.
Why does this not work if the itemTemplate function is a member of the page control object so e.g.
var page = WinJS.UI.Pages.define("/html/1_ListProducts.html", {
ready: function (element, options) {
// ready code
},
itemTemplate : function(itemPromise) {
// itemTemplate code
}
Do I have a fundamental misunderstanding here? Which elements / functions should be defined within the pageControl definition?
Best regards and thanks
Thomas
Wednesday, April 03, 2013 11:58 AM
Question
Answers
-
Hi Thomas,
You can do that actually. Doesn't the below code just do that or have I misunderstood your question?
In the Navigation App template, replace the following contents. I picked up the images from the ListView essentials sample:
home.html:
===========
<section aria-label="Main content" role="main">
<div id="myListView" data-win-control="WinJS.UI.ListView" ></div>
</section>home.js:
========
(function () {
"use strict";var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
{ title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
{ title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
{ title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
{ title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
{ title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
];WinJS.UI.Pages.define("/pages/home/home.html", {
ready: function (element, options) {
var listView = document.getElementById("myListView").winControl;
var dataList = new WinJS.Binding.List(dataArray);
listView.itemDataSource = dataList.dataSource;
listView.itemTemplate = this.itemTemplateFunction.bind(this);
},
itemTemplateFunction: function (itemPromise) {
return itemPromise.then(function (item) {
var div = document.createElement("div");
var img = document.createElement("img");
img.src = item.data.picture;
img.alt = item.data.title;
div.appendChild(img);var childDiv = document.createElement("div");
var title = document.createElement("h4");
title.innerText = item.data.title;
childDiv.appendChild(title);var desc = document.createElement("h6");
desc.innerText = item.data.text;
childDiv.appendChild(desc);div.appendChild(childDiv);
return div;
});
}
});
})();
@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz
- Marked as answer by Prashant H PhadkeMicrosoft employee, Moderator Monday, April 08, 2013 4:33 PM
Friday, April 05, 2013 12:05 AMModerator
All replies
-
You have to explicitly "bind" the function using the approach below. See this link for more info on "bind": http://msdn.microsoft.com/en-us/library/windows/apps/Hh770579.aspx
HTML:
=====
<input type="button" value="Click me" id="btnClick"/>
<input type="text" value="Before..." id="txtOut" />JS:
===
WinJS.UI.Pages.define("/pages/home/home.html", {
ready: function (element, options) {
document.getElementById("btnClick").addEventListener("click", this.btnClick_Clicked.bind(this), false);
},btnClick_Clicked: function() {
var textbox = document.getElementById("txtOut");
textbox.value = "After...";
}
});
@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz
- Edited by Prashant H PhadkeMicrosoft employee, Moderator Thursday, April 04, 2013 12:13 AM
Thursday, April 04, 2013 12:06 AMModerator -
Hi Prashant,
I know you can bind a function to an element by e.g. setting an listener. But I cannot bind a ListView template function like this, or can I?
Like ListView.itemtemplate = somehow_bind_my_itemtemplate_renderer
Thanks
Thomas
Thursday, April 04, 2013 1:26 PM -
Hi Thomas,
You can do that actually. Doesn't the below code just do that or have I misunderstood your question?
In the Navigation App template, replace the following contents. I picked up the images from the ListView essentials sample:
home.html:
===========
<section aria-label="Main content" role="main">
<div id="myListView" data-win-control="WinJS.UI.ListView" ></div>
</section>home.js:
========
(function () {
"use strict";var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
{ title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
{ title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
{ title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
{ title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
{ title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
];WinJS.UI.Pages.define("/pages/home/home.html", {
ready: function (element, options) {
var listView = document.getElementById("myListView").winControl;
var dataList = new WinJS.Binding.List(dataArray);
listView.itemDataSource = dataList.dataSource;
listView.itemTemplate = this.itemTemplateFunction.bind(this);
},
itemTemplateFunction: function (itemPromise) {
return itemPromise.then(function (item) {
var div = document.createElement("div");
var img = document.createElement("img");
img.src = item.data.picture;
img.alt = item.data.title;
div.appendChild(img);var childDiv = document.createElement("div");
var title = document.createElement("h4");
title.innerText = item.data.title;
childDiv.appendChild(title);var desc = document.createElement("h6");
desc.innerText = item.data.text;
childDiv.appendChild(desc);div.appendChild(childDiv);
return div;
});
}
});
})();
@prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz
- Marked as answer by Prashant H PhadkeMicrosoft employee, Moderator Monday, April 08, 2013 4:33 PM
Friday, April 05, 2013 12:05 AMModerator -
Hi Prashant,
got it. Great sample and help.
Thanks for that,
all the best
Thomas
Monday, April 08, 2013 6:42 AM