使用HTML＆amp; amp;在MetroApps中创建GroupItems使用Javascript

Question

我正在使用Windows 8和Visual Studio 2012 RC进行Metro应用程序开发。

我在这里使用GridApplication模板创建3个列表视图（ groupedItems ），这3个列表视图需要显示我服务的不同信息。实际上在默认网格应用程序中，他们为所有列表视图提供了常用项目，但是这里我不想显示第二个列表视图的图像，当我在javascript文件中删除了背景图像变量时它显示为空图像符号（参见截图）

下面我试着给出我的应用场景。

有人可以帮助我获得输出吗？

谢谢。

Answer 1

您需要修改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>

然后，只要指定itemtemplate，就为每个

指定一个不同的项目模板

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

Answer 2

您可以在Javascript中动态创建ListView项目，并通过检查项目“group”属性为每个ListView项目应用不同的CSS。

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;