0

質問が単純すぎたり、質問が多すぎたりする場合は申し訳ありませんが、単純な答えに非常に近く、まだ遠すぎるように感じます。私がやろうとしているのは、Visual Studio 2012 Express のグリッド レイアウト テンプレートを使用して、xml データをグリッド レイアウト テンプレートに統合することだけです。

私は、xml データを取得する手段として winjs.xhr に本当に困惑しています。

私の 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. aspx)。コード、リンク、さらには pdf リファレンスも大歓迎です。

4

1 に答える 1

0

WinJS.xhr呼び出しの結果は、応答を取得すると、他の非同期XHRと同様に完了する非同期promiseになります。これは、responseXMLプロパティで使用できます。これには、XMLからデータを取得するためのDOMのようなAPIがあります（クエリセレクター、ノードコンテンツなど）。

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 に答える