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="unique routes for page with/without overlay">
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
</head>
<body>
<div id="form"></div>
</body>
</html>
 
Overlay = {
    view: function() { 
        return m("div.overlay", [
          m(".title", "OVERLAY"),
          m("a[href=/]", {config: m.route}, "close")
        ])
    }
}
​
    
BigList = {
    controller: function() {
        this.max = 2
        var self = this;
        setTimeout(function() { self.max = 10; m.redraw();}, 500) 
    },
    view: function(c) {
        var lis = [];
        for (var i = 1; i < c.max; i++) {
            lis.push(m("li", i*i));
        }
        return m("ul", lis)
    }
}
​
Explanation = {
  view: function(){
    return m(".explanation", 
      "Run this is its own screen ➚ and watch the URL in the browser location bar change. Hence, the page with overlay displayed is bookmarkable. The overlay appears on a route change (m.route). It's important to notice in Page1, the redraw strategy is set to 'diff'. This is because normally a call to m.route sets it to 'all' which causes flicker."
      )
    
  }
  
}
​
Page1 = {
    controller: function(){
        m.redraw.strategy( "diff" );
    },
    view: function(c) {
        return m("div", [
            m("h1", "Header"),
            m("a[href=/overlay]", {config: m.route}, "open overlay"),
            m.route.param("action") == 'overlay' ? m.component(Overlay) : null,
            BigList,
            Explanation
        ]);
    }
}
    
m.route(document.getElementById('form'), "/", {
  "/": Page1,                                           
  "/:action": Page1
})
Output 300px

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

Dismiss x
public
Bin info
pelonpelonpro
0viewers