Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CanJS</title>
</head>
<body>
<script id="app-template" type="text/stache">
{{#eq page 'home'}}
  <home-page/>
{{else}}
  <h2>Away</h2>
  <a href="{{routeUrl(page='home')}}">
    Home
  </a>
{{/eq}}
</script>
  
<script id="home-template" type="text/stache">
<h1>Home Page</h1>
<a href="{{routeUrl(page='away')}}">
  Away
</a>
</script>
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
</body>
</html>
 
// Home component
var HomeViewModel = can.DefineMap.extend({
  page: 'string'
});
can.Component.extend({
  tag: 'home-page',
  view: can.stache.from('home-template'),
  ViewModel: HomeViewModel
});
// Root app template & view model
var appViewModel = new can.DefineMap({});
var renderApp = can.stache.from('app-template');
// Routing
can.route.data = appViewModel;
can.route('{page}', {page: 'home'});
can.route.ready();
// Append the app template to the body
document.body.appendChild(
  renderApp(appViewModel)
);
Output

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

Dismiss x
public
Bin info
bitovi-jsbinpro
0viewers