001.
(
function
() {
002.
"use strict"
;
003.
004.
var
groupDescription =
"グループ説明"
;
005.
var
itemDescription =
"アイテム説明"
;
006.
var
itemContent =
"<p>内容"
;
007.
008.
009.
010.
var
lightGray =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC"
;
011.
var
mediumGray =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC"
;
012.
var
darkGray =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC"
;
013.
014.
015.
016.
var
sampleGroups = [
017.
{ key:
"group1"
, title:
"Group Title: 1"
, subtitle:
"Group Subtitle: 1"
, backgroundImage: darkGray, description: groupDescription },
018.
{ key:
"group2"
, title:
"Group Title: 2"
, subtitle:
"Group Subtitle: 2"
, backgroundImage: lightGray, description: groupDescription },
019.
{ key:
"group3"
, title:
"Group Title: 3"
, subtitle:
"Group Subtitle: 3"
, backgroundImage: mediumGray, description: groupDescription },
020.
{ key:
"group4"
, title:
"Group Title: 4"
, subtitle:
"Group Subtitle: 4"
, backgroundImage: lightGray, description: groupDescription },
021.
{ key:
"group5"
, title:
"Group Title: 5"
, subtitle:
"Group Subtitle: 5"
, backgroundImage: mediumGray, description: groupDescription },
022.
{ key:
"group6"
, title:
"Group Title: 6"
, subtitle:
"Group Subtitle: 6"
, backgroundImage: darkGray, description: groupDescription }
023.
];
024.
025.
026.
027.
var
sampleItems = [
028.
{ group: sampleGroups[0], title:
"Item Title: 1"
, subtitle:
"Item Subtitle: 1"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
029.
{ group: sampleGroups[0], title:
"Item Title: 2"
, subtitle:
"Item Subtitle: 2"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
030.
{ group: sampleGroups[0], title:
"Item Title: 3"
, subtitle:
"Item Subtitle: 3"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
031.
{ group: sampleGroups[0], title:
"Item Title: 4"
, subtitle:
"Item Subtitle: 4"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
032.
{ group: sampleGroups[0], title:
"Item Title: 5"
, subtitle:
"Item Subtitle: 5"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
033.
034.
{ group: sampleGroups[1], title:
"Item Title: 1"
, subtitle:
"Item Subtitle: 1"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
035.
{ group: sampleGroups[1], title:
"Item Title: 2"
, subtitle:
"Item Subtitle: 2"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
036.
{ group: sampleGroups[1], title:
"Item Title: 3"
, subtitle:
"Item Subtitle: 3"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
037.
038.
{ group: sampleGroups[2], title:
"Item Title: 1"
, subtitle:
"Item Subtitle: 1"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
039.
{ group: sampleGroups[2], title:
"Item Title: 2"
, subtitle:
"Item Subtitle: 2"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
040.
{ group: sampleGroups[2], title:
"Item Title: 3"
, subtitle:
"Item Subtitle: 3"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
041.
{ group: sampleGroups[2], title:
"Item Title: 4"
, subtitle:
"Item Subtitle: 4"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
042.
{ group: sampleGroups[2], title:
"Item Title: 5"
, subtitle:
"Item Subtitle: 5"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
043.
{ group: sampleGroups[2], title:
"Item Title: 6"
, subtitle:
"Item Subtitle: 6"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
044.
{ group: sampleGroups[2], title:
"Item Title: 7"
, subtitle:
"Item Subtitle: 7"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
045.
046.
{ group: sampleGroups[3], title:
"Item Title: 1"
, subtitle:
"Item Subtitle: 1"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
047.
{ group: sampleGroups[3], title:
"Item Title: 2"
, subtitle:
"Item Subtitle: 2"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
048.
{ group: sampleGroups[3], title:
"Item Title: 3"
, subtitle:
"Item Subtitle: 3"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
049.
{ group: sampleGroups[3], title:
"Item Title: 4"
, subtitle:
"Item Subtitle: 4"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
050.
{ group: sampleGroups[3], title:
"Item Title: 5"
, subtitle:
"Item Subtitle: 5"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
051.
{ group: sampleGroups[3], title:
"Item Title: 6"
, subtitle:
"Item Subtitle: 6"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
052.
053.
{ group: sampleGroups[4], title:
"Item Title: 1"
, subtitle:
"Item Subtitle: 1"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
054.
{ group: sampleGroups[4], title:
"Item Title: 2"
, subtitle:
"Item Subtitle: 2"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
055.
{ group: sampleGroups[4], title:
"Item Title: 3"
, subtitle:
"Item Subtitle: 3"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
056.
{ group: sampleGroups[4], title:
"Item Title: 4"
, subtitle:
"Item Subtitle: 4"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
057.
058.
{ group: sampleGroups[5], title:
"Item Title: 1"
, subtitle:
"Item Subtitle: 1"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
059.
{ group: sampleGroups[5], title:
"Item Title: 2"
, subtitle:
"Item Subtitle: 2"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
060.
{ group: sampleGroups[5], title:
"Item Title: 3"
, subtitle:
"Item Subtitle: 3"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
061.
{ group: sampleGroups[5], title:
"Item Title: 4"
, subtitle:
"Item Subtitle: 4"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
062.
{ group: sampleGroups[5], title:
"Item Title: 5"
, subtitle:
"Item Subtitle: 5"
, description: itemDescription, content: itemContent, backgroundImage: lightGray },
063.
{ group: sampleGroups[5], title:
"Item Title: 6"
, subtitle:
"Item Subtitle: 6"
, description: itemDescription, content: itemContent, backgroundImage: mediumGray },
064.
{ group: sampleGroups[5], title:
"Item Title: 7"
, subtitle:
"Item Subtitle: 7"
, description: itemDescription, content: itemContent, backgroundImage: darkGray },
065.
{ group: sampleGroups[5], title:
"Item Title: 8"
, subtitle:
"Item Subtitle: 8"
, description: itemDescription, content: itemContent, backgroundImage: lightGray }
066.
];
067.
068.
069.
070.
function
getItemReference(item) {
071.
return
[item.group.key, item.title];
072.
}
073.
074.
function
resolveGroupReference(key) {
075.
for
(
var
i = 0; i < groupedItems.groups.length; i++) {
076.
if
(groupedItems.groups.getAt(i).key === key) {
077.
return
groupedItems.groups.getAt(i);
078.
}
079.
}
080.
}
081.
082.
function
resolveItemReference(reference) {
083.
for
(
var
i = 0; i < groupedItems.length; i++) {
084.
var
item = groupedItems.getAt(i);
085.
if
(item.group.key === reference[0] && item.title === reference[1]) {
086.
return
item;
087.
}
088.
}
089.
}
090.
091.
092.
093.
function
getItemsFromGroup(group) {
094.
return
list.createFiltered(
function
(item) {
return
item.group.key === group.key; });
095.
}
096.
097.
var
list =
new
WinJS.Binding.List();
098.
var
groupedItems = list.createGrouped(
099.
function
groupKeySelector(item) {
return
item.group.key; },
100.
function
groupDataSelector(item) {
return
item.group; }
101.
);
102.
103.
104.
105.
sampleItems.forEach(
function
(item) {
106.
list.push(item);
107.
});
108.
109.
WinJS.Namespace.define(
"Data"
, {
110.
items: groupedItems,
111.
groups: groupedItems.groups,
112.
getItemsFromGroup: getItemsFromGroup,
113.
getItemReference: getItemReference,
114.
resolveGroupReference: resolveGroupReference,
115.
resolveItemReference: resolveItemReference
116.
});
117.
})();