如何在windows8 metro app中创建list界面

1.ui 设计：

<h1>The Old New Thing</h1>
            <div id="downloadStatus"></div>
            <div id="template" data-win-control="WinJS.Binding.Template">
                <div data-win-bind="innerText: title" class="postTitle"></div>
                <div data-win-bind="innerText: date" class="postDate"></div>
            </div>
            <div id="posts" data-win-control="WinJS.UI.ListView"
                 data-win-options="{itemRenderer: template, layout: {type: WinJS.UI.ListLayout}}"></div>
           

2.function 设计：

var postItems = [];

    function processPosts(request) {
        // clear the progress indicator
        downloadStatus.innerText = "";

        // parse the RSS
        var items = request.responseXML.selectNodes("//item");
        if (items.length == 0) { downloadStatus.innerText = "error downloading posts"; }

        for (var i = 0, len = items.length; i < len; i++) {
            var item = items[i];
            // append data to #posts div
            //var parent = document.createElement("div");
            //appendDiv(parent, item.selectNodes("title")[0].text, "postTitle");
            //appendDiv(parent, item.selectNodes("pubDate")[0].text, "postDate");
            //appendDiv(parent, item.selectNodes("description")[0].text, "postContent");
            posts.appendChild(parent);
            WinJS.Utilities.setInnerHTMLUnsafe(posts, parent);
            //msWWA.execUnsafeLocalFunction(function () { posts.appendChild(parent); });

            var post = {
                title: item.selectNodes("title")[0].text,
                date: item.selectNodes("pubDate")[0].text,
                content: item.selectNodes("description")[0].text,
            };
            postItems.push(post);

        }

        posts.winControl.dataSource = postItems;
    }



    //function processPosts(feed) {
    //    downloadStatus.innerText = "";

    //    for (var i = 0, len = feed.items.length; i < len; i++) {
    //        var item = feed.items[i];
    //        var post = {
    //            title: item.title.text,
    //            date: item.publishedDate,
    //            content: item.summary.text,
    //        };
    //        postItems.push(post);
    //    }

    //    // populate the ListView control's data source
        
    //    msWWA.execUnsafeLocalFunction(function () { posts.winControl.dataSource = postItems; });
    //}




    function appendDiv(parent, html, className) {
        var div = document.createElement("div");
        div.innerHTML = html;
        div.className = className;
        parent.appendChild(div);
    }

    function downloadError() {
        downloadStatus.innerText = "error downloading posts";
    }
           

3.使用：

function fragmentLoad(elements, options) {
        WinJS.UI.processAll(elements)
            .then(function () {
            // TODO: Initialize the fragment here.
            downloadStatus.innerText = "downloading posts...";
            WinJS.xhr({ url: "http://blogs.msdn.com/b/oldnewthing/rss.aspx" }).
            then(processPosts, downloadError);

            //var md = new Windows.UI.Popups.MessageDialog("Hello World");
            md.commands.append(new Windows.UI.Popups.UICommand("Yes"));
            md.commands.append(new Windows.UI.Popups.UICommand("No"));
            //md.showAsync().then(function (command){ alert("pressed"); });


        });
    }
           

效果：