使用HTML&在MetroApps中创建GroupItem. Java脚本 [英] Creation Of GroupItems in MetroApps using HTML & Javascript

问题描述

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

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

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

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?

谢谢.

推荐答案

您需要修改HTML中的模板

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>

然后，无论您在何处指定itemtemplate，都为每个模板指定一个不同的

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

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

这篇关于使用HTML&在MetroApps中创建GroupItem. Java脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！