创建使用MetroApps GroupItems中的HTML和Javascript(Creation

我使用的是Windows 8和Visual Studio 2012 RC的地铁应用程式开发。

在这里，我以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:

您可以创建ListView在Javascript动态的项目和不同的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;

文章来源: Creation Of GroupItems in MetroApps using HTML & Javascript