CODEWITHSUNDEEP
windows-8winjs
Themos Piperakis
Themos Piperakis

Reputation: 675

Dynamic template in listview (WinJS) in windows 8

I have a windows 8 application with a simple listview in a list layout. I have fetched my blog items (syndication), now what I want to achieve is add a dynamic item that will function as a "load more" button. To do this, I want to specify a different template just for this item. The sample I have found uses a function template, which really isn't very versatile since I have to load all template elements using JavaScript. Is there a way to dynamically specify a WinJS.Binding.Template based on an item property?

Upvotes: 4

Views: 4535

Answers (3)

Themos Piperakis
Themos Piperakis

Reputation: 675

An excellent article on the subject

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

Upvotes: 5

louis.luo
louis.luo

Reputation: 2971

I actually had the same problem before. The way I handle this problem is as following:

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.

Upvotes: 2

ChristiaanV
ChristiaanV

Reputation: 5541

I think that the last part of this tutorial "Using a function to display items" can help you. Within the function you can determine which item there is in your list and render a different template. It also would be possible to load the different templates from your HTML file.

Another option that you might have is to use the pagesToLoad property in combination with the automaticallyLoadPages property. This will automatically start loading new items when the user scrolls to the end of the listbox.

Upvotes: 1

Related Questions