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>
<meta name="description" content="Use background m.request to display loading view while waiting for a response">
  <meta charset="utf-8">
  <script src="https://cdn.rawgit.com/lhorie/mithril.js/next/mithril.js"></script>
</head>
<body>
​
</body>
</html>
 
// Credit: @barneycarroll
​
var home = {
    view : function(){
        return [
            m( 'h1', 'Hiya!' ),
            m( 'a', {
                href : '/articles',
                config : m.route
            }, 'Check out some articles?' )
        ]
    }
}
​
var articles = {
    controller : function(){
        this.articles = m.request( {
            // Background means don't wait for resolution to draw the view 
            background : true,
            method     : 'GET',
            url        : '/articles.json'
        } )
        
        // Background m.request doesn't redraw automatically on success 
        this.articles.then( m.redraw )
    },
    view : function( ctrl ){
        return [
            m( 'h1', 'Articles:' ),
            m( 'a', {
                href : '/',
                config : m.route
            }, 'Home' ),
            m( 'hr' ),
            // Do we have anything?
            ctrl.articles()
            // If so, render the list...
            ? m( 'ul',
                ctrl.articles().map( function( article ){
                    return m( 'li', article )
                } )
            )
            // ...if not display your spinner or somesuch
            : m( 'div', [
        'Loading articles, please wait...',
        m('img[src=http://www.hrblock.com/images/spinner.gif]')
        ])
        ]
    }
}
​
// Ignore this - it's just to stimulate a delayed response without a server 
m.request = function(){
    var deferred = m.deferred()
    
    setTimeout( function(){
        deferred.resolve( [
            'Hello world',
            'More stuff',
            'Etc'
        ] )
    }, 4000 )
    
    return deferred.promise
}
​
m.route( document.body, '/', {
    '/' : home,
    '/articles' : articles
} )
Output

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

Dismiss x
public
Bin info
pelonpelonpro
0viewers