html - HTMLとJavascriptを使用してMetroアプリで2つのListViewを作成

Question

Iamは、1つのhtmlファイルに異なる情報を含む2つのリストビューを作成しようとしていますが、ここで1つのリストビューを変更すると、他のリストビューにも影響します。しかし、サービス情報が異なる2つのリストビューを維持する必要がありますか？Visual-studio-2012RCとwindows8を使用しています。実際の例はどれも私にとって非常に役立ちます。

これが私の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

    });

})();

ここで私はあなたに私のアプリケーションを与えようとします、私が私の2番目のグループの画像を削除すると、それはグループ1にも影響しますが、グループ1の画像を設定する必要があり、グループ2には画像は必要ありませんか？私のシナリオのために何をしますか？よろしくお願いします。