index.html
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> --> <script type="text/javascript" src="lib/jquery.js"></script> <script type="text/javascript" src="lib/handlebars.js"></script> <script type="text/javascript" src="lib/ember.js"></script> </head> <body> <script type="text/javascript" src="js/app.js"></script> <script type="text/x-handlebars" id="user"> <h2> {{first}} {{last}} <img {{bindAttr src="avatar"}} class="pull-right" width=50 /> </h2> <dl> <dt>First</dt> <dd>{{first}}</dd> <dt>Last</dt> <dd>{{last}}</dd> </dl> </script> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <!-- <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/movie.js"></script> --> </body> </html>
app.js
var App = Ember.Application.create(); App.ApplicationRoute = Ember.Route.extend({ model: function() { return users; } }); var users = [ { id: 1, first: 'Ryan', last: 'Florence', avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg' }, { id: 2, first: 'Tom', last: 'Dale', avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png' }, { id: 3, first: 'Yehuda', last: 'Katz', avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg' } ]; App.Router.map(function() { this.resource('user', {path: "/users/:user_id"}); }); App.UserRoute = Ember.Route.extend({ model: function(params) { return users[params.user_id]; } });
直接访问localhost#/users/:user_id