1

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

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

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

谁能帮我得到我的输出？

谢谢你。 截屏

4

2 回答 2

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>

然后在您指定项目模板的任何地方，为每个指定一个不同的

firstListView.itemTemplate = element.querySelector(".itemtemplate");
secondListView.itemTemplate = element.querySelector(".itemtemplatenoimage");
于 2012-06-16T00:38:10.663 回答
0

您可以在 Javascript 中动态创建项目，并通过检查项目“组”属性ListView将不同的 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;
于 2012-12-12T07:32:16.670 回答