0

如果问题过于简单或要求太多，我深表歉意，但我觉得我非常接近一个简单的答案，但仍然太远了。我要做的就是使用 Visual Studio 2012 express 中的网格布局模板将 xml 数据集成到网格布局模板中。

winjs.xhr 作为提取 xml 数据的一种方式，我真的很困惑。

我的 xml 文件具有匹配组标题、项目标题和页面内容的节点。

我部分编辑的 data.js 文件如下：

(function () {
"use strict";

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.
generateRulesData().forEach(function (item) {
    list.push(item);
    return WinJS.xhr({ url: "/data/myfile.xml" });
});

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

// 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];
}

// 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; });
}

// Get the unique group corresponding to the provided group key.
function resolveGroupReference(key) {
    for (var i = 0; i < groupedItems.groups.length; i++) {
        if (groupedItems.groups.getAt(i).key === key) {
            return groupedItems.groups.getAt(i);
        }
    }
}

// Get a unique item from the provided string array, which should contain a
// group key and an item title.
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;
        }
    }
}

// Returns an array of sample data that can be added to the application's
// data list. 
function generateRulesData() {
    var itemContent = "INSERT CONTENT HERE";
    var itemDescription = "DESCRIPTION FOR EACH RULE";
    var groupDescription = "Group Description: INSERT";

    // These three strings encode placeholder images. You will want to set the
    // backgroundImage property in your real data to be URLs to images.
    var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
    var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
    var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

    // Each of these sample groups must have a unique key to be displayed
    // separately.
    var sampleGroups = [
        { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
        { key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription }
    ];

    // Each of these sample items should have a reference to a particular
    // group.
    var sampleItems = [
        { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
        { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

        { group: sampleGroups[1], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[1], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
        { group: sampleGroups[1], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray }
    ];

    return sampleItems;
}
 })();

非常感谢具有将 xml 拉入网格模板的简单方法的页面链接。我查看了一个有助于将 rss 拉入博客的 msdn 页面，但我希望能得到更多——更简单的（http://msdn.microsoft.com/en-us/library/windows/apps/hh974582. ASP）。代码、链接甚至 pdf 参考将不胜感激。

4

1 回答 1

0

WinJS.xhr 调用的结果将是一个异步承诺，一旦你得到响应，它将像任何其他异步 XHR 一样完成。它将在 responseXML 属性中可用——它有一个类似 DOM 的 API，用于从 XML 中获取数据——例如查询选择器、节点内容等。

在您的示例中，关键是list.push使用提取 XML 数据的适当推送来更新调用。一旦你完成了这个，剩下的样本就剩下了，它应该允许你在网格中显示你的数据。

如果我们以您的代码为例，并使用以下 XML 示例：

<Data>
  <Stuff>A</Stuff>
  <Stuff>B</Stuff>
  <Stuff>C</Stuff>
  <Stuff>D</Stuff>
  <Stuff>E</Stuff>
  <Stuff>F</Stuff>
</Data>

在文件Data.xml中，然后加载它将是：

var 节点 = r.responseXML.querySelectorAll("Stuff");

for (var i = 0; i < nodes.length; i++) {
    list.push({
        data: nodes[i].textContent,
    });
}
于 2012-12-23T20:10:21.467 回答