Creation Of GroupItems in MetroApps using HTML & Javascript

问题

I am using Windows 8 and Visual Studio 2012 RC for Metro apps Development.

Here I am taking GridApplication template for creating 3 listviews (groupedItems), these 3 listviews will need to display different information from my service. Actually in default grid application they have given common items for all listviews, but here I do not want to display images for second listview, when I removed background image variable in javascript file it is showing like empty-image symbol (cf. screenshot)

Below I am trying to give my application scenario.

Can anyone help me to get my output?

Thank you.

回答1:

You need to modify the template in HTML

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
    </div>
</div>

<div class="itemtemplatenoimage" data-win-control="WinJS.Binding.Template">
<div class="item-overlay">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
    </div>
</div>

then wherever you specify the itemtemplate, specify a different one for each

firstListView.itemTemplate = element.querySelector(".itemtemplate");
secondListView.itemTemplate = element.querySelector(".itemtemplatenoimage");

回答2:

You can create the ListView items dynamically in Javascript and apply different CSS to each of your ListView item by checking the items "group" property.

function listViewItemTemplate(item) {
    // data has has information about each item
    var data = item.data._value;

    var itemElement = document.createElement('div');
    itemElement.id = 'testElement';

    if (data.group === "group1") {
        itemElement.class = "cssForGroup1"; 
        var image = document.createElement('image');
        image.src = "you_file_path";
        image.css = "imageCssForGroup1";
        itemElement.append(image);
    } else if (data.group === "group2") {
        itemElement.class = "cssForGroup2";
    }
    ...
    else {
        ...
    }

    return {element: itemElement}
}

...
// Then you can assign the template to your listview
youListViewControl.itemTemplate = listViewItemTemplate;

来源：https://stackoverflow.com/questions/11017161/creation-of-groupitems-in-metroapps-using-html-javascript