<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <script type="text/x-handlebars"> <h1>Application</h1> <ul> <li>{{#linkTo "about"}}About{{/linkTo}}</li> <li>{{#linkTo "login"}}Login{{/linkTo}}</li> </ul> {{outlet}} </script> <script type="text/x-handlebars" id="about"> <h2>About</h2> <ul> <li> {{#linkTo "about.location"}}Location{{/linkTo}} </li> <li> {{#linkTo "about.product"}}Product{{/linkTo}} </li> </ul> {{outlet}} </script> <script type="text/x-handlebars" id="index"> <h2>Index</h2> </script> <script type="text/x-handlebars" id="login"> <h2>Login</h2> </script> <script type="text/x-handlebars" id="about/index"> <h3>Index</h3> </script> <script type="text/x-handlebars" id="about/location"> <h3>Location</h3> </script> <script type="text/x-handlebars" id="about/product"> <h3>Product</h3> </script> </body> </html>
body { font-family: sans-serif; color: #454545; } a { color: blue; } a.active { color: red; }
var App = Ember.Application.create(); App.Router.map(function() { this.resource('about', function() { this.route('product'); this.route('location'); }); this.resource('login'); });