Question

Iam尝试在单个html文件中创建具有不同信息的2个Listview。但是，如果我修改一个列表视图，它也会影响其他列表视图。但我需要使用不同的服务信息维护2个列表视图？使用Visual-studio-2012RC和windows8.Any工作示例对我很有帮助。

这是我的HTML：

<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
    <p class="group-title win-type-x-large" data-win-bind="textContent: title; groupKey: key" 
        onclick="WinJS.Navigation.navigate('/pages/groupDetail/groupDetail.html', { groupKey: event.srcElement.groupKey })" role="link"></p>
</div>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage" style="-ms-grid-column-span: 1;"/>
    <div class="item-overlay">
        <h5 class="item-title" data-win-bind="textContent: title"></h5>
        <h4 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h4>
        <h6 class="group-content" data-win-bind="textContent:content" style="margin-left: 2px; margin-right: -13.5px; -ms-grid-row-span: 2; -ms-grid-row:4;" ></h6>
       </div>
</div>

<!-- The content that will be loaded and displayed. -->
<div class="fragment groupeditemspage">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">DealFoundry</span>
        </h1>
    </header>
    <section aria-label="Main content" role="main">
        <div class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{selectionmode:'all'}" style="left: 1.5px; top: -1.5px;"></div>
    </section>
    </div>

这是我的javascript文件（data.js）：

    (function () {
    "use strict";

    var groupDescription = "Group Description: Lorem ipsum dolor sit amet, ";
    var itemDescription = "Item Description:This is the Item Description";
    var content1 = "Task assigned to James";
    // backgroundImage property in your real data to be URLs to images.
    var lightGray = "ms-appx:///images/microsoft-logo.png";
    // Each of these sample groups must have a unique key to be displayed
    // separately.
    var sampleGroups = [
        { key: "group1", title: "Group-1", subtitle: "Tasks", backgroundImage: darkGray, description: groupDescription },
        { key: "group2", title: "Group-2", subtitle: "Today Deals",backgroundImage: darkGray, description: groupDescription}
          ];

    // Each of these sample items should have a reference to a particular
    // group.
    var sampleItems = [
        { group: sampleGroups[0], title: "John Smith", subtitle: "LesliHart (QR-2157DEF)", description: itemDescription,  backgroundImage: lightGray,content:"Application has been re-assigned"},
        { group: sampleGroups[0], title: "Anna J Fox", subtitle: "Samn Snooker (QNB-1256ABC)", description: itemDescription,  backgroundImage: darkGray,content:"Application rejected"},
        { group: sampleGroups[0], title: "Masson Greeves", subtitle: "Jhonty Rodes (ARN-7854AD)", description: itemDescription,  backgroundImage: mediumGray,content:"Application accepted"},
        { group: sampleGroups[0], title: "Peter Dormain", subtitle: "Glen McGrath (HCL-4567ADE)", description: itemDescription,  backgroundImage: msGray,content:"Application has been re-assigned as the UW is not available for next 2 weeks" },
       { group: sampleGroups[1], title: "Jenni Scott", subtitle: "Jhonty Rodes (ARN-7854AD)", description: itemDescription , content: "Status:Application has been re-assigned as the UW is not available for next 2 weeks" },
       { group: sampleGroups[1], title: "John Smith", subtitle: "James Gosling (IBM - 8569PNM)", description: itemDescription, content: "Status:Application accepted" },
    // Get a reference for an item, using the group key and item title as a
    // unique reference to the item that can be easily serialized.
    function getItemReference(item) {
        return [item.group.key, item.title];

    }

    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    // This function returns a WinJS.Binding.List containing only the items
    // that belong to the provided group.
    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    // TODO: Replace the data with your real data.
    // You can add data from asynchronous sources whenever it becomes available.
    sampleItems.forEach(function (item) {
        list.push(item);

    });

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference

    });

})();

在这里，我尝试给你我的应用程序，如果我删除我的第二组中的图像，它也影响了组-1。但是我需要为Group-1设置图像而Group-2需要no-image？我该怎样做我的情景？提前谢谢你。

使用HTML＆amp; amp;在Metro App中创建2个ListView使用Javascript

0 个答案: