Dynamic Listing Template (WinJS) in windows 8

Question

I have a Windows 8 application with a simple list in a list layout. I got my blog elements (syndication), now I want to add a dynamic element that will function as a “upload more” button. For this, I want to specify a different template only for this element. The sample I found uses a function template, which is really not very universal, since I have to load all the elements of the template using JavaScript. Is there a way to dynamically specify WinJS.Binding.Template based on an element property?

Answer 1

Great related article

http://stephenwalther.com/blog/archive/2012/05/23/metro-dynamically-switching-templates-with-a-winjs-listview.aspx

Answer 2

Actually, I had the same problem. The way I handle this problem is as follows:

function listItemTemplateRenderer(item) { //Get data from item. var data = item._value.data; // if it is a special item renderer, apply special template if (data.isSpecialItem) { return specialItemRenderer(data); } var itemElement = document.createElement('div'); itemElement.className = "listItemTemplate"; var placeHolder = document.createElement('div'); placeHolder.className = "itemTemplateClass"; placeHolder.id = data.id; var itemDetail = document.createElement('div'); itemDetail.className = "itemDetailStyle"; ... //whatever you wanna add to your template //Append child elements placeHolder.appendChild(itemDetail); itemElement.appendChild(placeHolder); return { element: itemElement }; } // Template for the special item function messageItemRenderer(item) { var itemElement = document.createElement('div'); itemElement.className = "listItemTemplat"; var placeHolder = document.createElement('div'); placeHolder.className = "specialItemTemplate"; placeHolder.id = item.id; var dataText = document.createElement('div'); dataText.className = "dataText"; dataText.innerText = item.text; placeHolder.appendChild(dataText); itemElement.appendChild(placeHolder); itemElement.onclick = item.clickHandler; return { element: itemElement }; } 

Hope this helps.

Answer 3

I think the last part of this tutorial, “ Using a Function to Display Elements, ” may help you. Inside the function, you can determine which item is on your list and display a different template. You could also download various templates from your HTML file.

Another option that may arise is to use the pagesToLoad property in conjunction with automaticallyLoadPages . This will automatically start loading new items when the user scrolls to the end of the list.