What is the simplest way to pull a local xml file and apply it to the windows 8 java script grid layout template data.js file?

问题

My apologies if the question is overly simple or asking for a bit too much but I feel like I am very close to a simple answer and still too far. All I am trying to do is use the grid layout template in Visual Studio 2012 express to integrate xml data into the grid layout template.

I've been really stumped with the winjs.xhr as a means of pulling the xml data.

My xml file has nodes to match the group titles, item titles and page content.

My partially edited data.js file is below:

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

A link to a page that has a simple way to pull xml into the grid template would be greatly appreciated. I have looked at a somewhat helpful msdn page for pulling rss into a blog but I was hoping for a bit more -- something simpler (http://msdn.microsoft.com/en-us/library/windows/apps/hh974582.aspx). Code, a link or even a pdf reference would be greatly appreciated.

回答1:

The result of the WinJS.xhr call will be an async promise that will complete like any other async XHR, once you've gotten the response. It'll be available in the responseXML property -- this has a DOM-like API for getting the data out of the XML -- e.g. query selector, node content etc.

In your sample the key is to update the list.push call with the appropriate push from extracting your XML data. Once you've done this, and the rest of the sample is left, it should allow you to show your data in the grid.

If we take your code as an example, and use the following example of XML:

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

In the file Data.xml, then loading it would be:

var nodes = r.responseXML.querySelectorAll("Stuff");

for (var i = 0; i < nodes.length; i++) {
    list.push({
        data: nodes[i].textContent,
    });
}

来源：https://stackoverflow.com/questions/14009720/what-is-the-simplest-way-to-pull-a-local-xml-file-and-apply-it-to-the-windows-8