vs11 express javascript 显示rss信息

最新推荐文章于 2024-11-02 12:42:04 发布

CF西西

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量596

点赞数

分类专栏： windows 8 文章标签： javascript express rss div function listview

windows 8 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果如下:

做法：1.navigator app project（javascript）

2.homepage.html上输入：

 <h1>The Old New Thing</h1>
              <div id="downloadStatus"></div>
              <div id="posts"></div>

3.default.css上输入样式：

/* default.css */
body
{
    background-color: #fff;
    color: #000;
    font-family: Verdana;
    padding: 8pt;
}

a:link, a:visited, a:active
{
    color: #700;
    font-weight: inherit;
}

h1
{
    text-transform: none;
    font-family: inherit;
    font-size: 22pt;
}

#posts
{
    width: 99%;
    height: 100%;
    overflow: auto;
}

.postTitle
{
    color: #700;
    font-size: 1.2em;
    font-weight: bold;
}

.postDate
{
    color: #666;
    font-size: 11pt;
}

.postContent
{
    font-size: medium;
    line-height: 18px;
}

4.在homepage.js上对id进行映射：

   downloadStatus.innerText = "downloading posts...";
            WinJS.xhr({ url: "http://blogs.msdn.com/b/oldnewthing/rss.aspx" }).
            then(processPosts, downloadError);

在构造函数中添加好上面的代码，记得对当中的一些函数添加代码：

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

    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";
    }

如此便可从msdn blog上获得rss订阅信息

拓展：显示list布局的信息

1.在homepage.js中替换掉processPost函数

 var 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
        posts.winControl.dataSource = postItems;
    }

2.homepage。html中设置布局

<body>
    <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>
</body>

如下便能出现list布局的页面