Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script>
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};
$ = function(sel, ctx){return (ctx || document).querySelector(sel)}
$$ = function(sel, ctx){return (ctx || document).querySelectorAll(sel)}
</script>
​
<meta name="description" content="mithriljs: rss feed reader">
  <meta charset="utf-8">
  <title>Mithril Feed Reader</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
</head>
<body>
</body>
</html>
 
rss = {}
​
rss.newsSources = [{
    title: "CNN ",
    url: 'http://rss.cnn.com/rss/cnn_topstories.rss'
}, {
    title: "Reuters World News ",
    url: 'http://feeds.reuters.com/Reuters/worldNews'
}, {
    title: "Bloomberg ",
    url: 'http://www.bloombergview.com/rss'
}]
​
rss.getFeed = function(exa) {
        return m.request({
            method: 'GET',
            dataType: "jsonp",
            url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&q=" + exa,
            unwrapSuccess: function(response) {
                return response.responseData.feed.entries;
            },
            unwrapError: function(response) {
                return response.error;
            }
        })
    }
​
rss.vm = (function(){
  vm = {}
  vm.init = function(){     
    vm.sources = rss.newsSources
    vm.selectedSource = m.prop("")
    vm.feed = m.prop([])
    vm.getNews = function(selection){
      rss.getFeed(selection).then(function(response){
        vm.feed(response)
      })
    }
  }
  return vm
})()
​
rss.controller = function() {
  rss.vm.init()
  rss.vm.getNews(rss.vm.sources[0].url)
};
​
rss.view = function(ctrl) {
  //console.log('rss.vm', rss.vm);
    return [m('select', {
            onchange: m.withAttr('value', rss.vm.getNews)
        }, [
            rss.vm.sources.map(function(source) {
                return m('option', {
                    value: source.url
                }, source.title)
            })
        ]),
        m('.list-group', [
            rss.vm.feed().map(function(article) {
                return m('a.list-group-item', {
                    href: article.link,
                    target: '_newtab'
                }, [
                    m('h4.list-group-item-heading', article.title),
                    m('p.list-group-item-text.text-left', article.contentSnippet),
                    m('span.small', article.publishedDate)
                ]);
            })
        ])
    ]
}
​
m.mount(document.body, rss)
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pelonpelonpro
0viewers