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 charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
<script type="text/stache" id="app-template">
<pre>Route: #!{{routeData.page}}</pre>
<pre>workInProgress: {{routeData.workInProgress}}</pre>
{{#eq routeData.page 'home'}}
  <home-page />
{{else}}
  <away-page />
{{/eq}}
</script>  
  
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
</body>
</html>
 
var Routing = can.DefineMap.extend('Routing', {
  page: { type:'string', default: 'home' },
  workInProgress: { type: 'boolean', serialize: false }
});
var routing = new Routing();
​
var MainVM = can.DefineMap.extend('MainVM', {
  get routeData() { return routing; },
  get routeDataClone() { return routing.get(); },
  get workInProgress() { return routing.workInProgress; },
  shieldData: {
    value({resolve, listenTo}) {
      var lastRoute = this.routeDataClone;
​
      listenTo('routeDataClone', function(ev, newData) {
        //console.log(newData.page+' -- ' + lastRoute.page);
        if (this.workInProgress) {
          if (confirm('Are you sure?')) {
              savedData = newData;
              this.routeData.workInProgress = false;
          } else {
            // do something to prevent routing???
          }
        } else {
          resolve(newData);
        }
        lastRoute = newData;
      });
​
      listenTo('workInProgress', function(ev, newValue) {
        if (!newValue && lastRoute !== undefined) {
          resolve(lastRoute);
          lastRoute = undefined;
        }
      });
    }
  }
  
});
​
​
// Home component
can.Component.extend({
  tag: "home-page",
  view: `
    <h1>{{title}}</h1>
    <a href="{{routeUrl(page='away')}}">
      Away
    </a>
  `,
  ViewModel: {
    title: {
      default: "Home Page"
    }
  }
});
​
// Away component
can.Component.extend({
  tag: "away-page",
  view: `
    <h1>{{title}}</h1>
    <a href="{{routeUrl(page='home')}}">
      Home
    </a>
  `,
  ViewModel: {
    title: {
      default: "Away Page"
    },
    connectedCallback() {
      routing.workInProgress = true;
    }
  }
});
​
​
// Routing
can.route.register("{page}", { page: "home" });
can.route.data = routing;
can.route.start();
​
var mainVM = new MainVM();
mainVM.listenTo('shieldData', (ev, newVal, oldVal) => {
  console.log('listenTo.shieldData', newVal);
});
​
var template = can.stache.from("app-template");
var frag = template(mainVM);
document.body.appendChild(frag);
​
Output

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

Dismiss x
public
Bin info
jeroencornelissenpro
0viewers