使用HTML&；在MetroApps中创建GroupItems；Javascript

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

这里我使用

GridApplication

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

下面我尝试给出我的应用场景

有人能帮我得到我的输出吗

多谢各位。

---

您需要在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>

---

您需要在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>

---

您可以在Javascript中动态创建

ListView

项，并通过检查items“group”属性将不同的CSS应用于每个

ListView

项

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;

---

您可以在Javascript中动态创建

ListView

项，并通过检查items“group”属性将不同的CSS应用于每个

ListView

项

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;

---

@gswin感谢您的回复，实际上，如果我删除html中的图像标记，它也会影响组1和组3。因此，我不想在这3个组之间保持任何关系。有任何其他项目模板来分隔这些组吗？是的，您基本上需要一个项目模板，用于您想要使用的每个不同样式。@gswin，你能给我提供一些html来获取上述输出场景吗？提前谢谢你。@gswin谢谢你的回复，实际上如果我删除html中的图像标记，这对第1组和第3组也有影响。所以我不想在这3个组之间保持任何关系。还有其他项目模板来分隔这些组吗？是的，您基本上需要一个项目模板，用于您想要使用的每个不同样式。@gswin，您能提供一些html来获得上述输出场景吗？提前谢谢。