<!DOCTYPE html> <html> <head> <meta name="description" content="Ember: Routes, {{outlet}}, and {{#linkTo}}" /> <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="http://ember101.com/jsbin/ember.rc3.js"></script> <meta charset=utf-8 /> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <title>Episode 5</title> </head> <body> <script type="text/x-handlebars"> <div class="container"> <div class="row-fluid"> <ul class="nav nav-list span3 well"> <li><a href="#" {{action createUser}}>+ New User</a></li> {{#each model}} <li>{{#linkTo "user" this}}{{first}}{{/linkTo}}</li> {{/each}} </ul> <div class="span9 well">{{outlet}}</div> </div> </div> </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> {{#linkTo "editUser" this class="btn btn-primary"}}Edit{{/linkTo}} </script> <script type="text/x-handlebars" id="editUser"> <h2>Edit User</h2> <form class="form-inline" {{action save on="submit"}}> <label> First: {{input type="text" value=first}} </label><br> <label> Last: {{input type="text" value=last}} </label> <div class="controls"> <button type="submit" class="btn btn-primary">Done</button> </div> </form> </script> </body> </html>
body { margin-top: 30px } .active { color: red !important; }
var App = Ember.Application.create(); App.Router.map(function() { this.resource('user', {path: '/users/:user_id'}); this.resource('editUser', {path: '/users/:user_id/edit'}); }); App.ApplicationRoute = Ember.Route.extend({ model: function() { return users; }, events: { createUser: function() { var users = this.modelFor('application'); var user = users.pushObject({ id: users.length }); this.transitionTo('editUser', user); } } }); App.UserRoute = Ember.Route.extend({ model: function(params) { return users[params.user_id]; } }); App.EditUserRoute = Ember.Route.extend({ model: function(params) { return users[params.user_id]; }, events: { save: function() { var user = this.modelFor('editUser'); this.transitionTo('user', user); } } }); var users = [ { id: 0, first: 'Ryan', last: 'Florence', avatar: 'https://si0.twimg.com/profile_images/3123276865/5c069e64eb7f8e971d36a4540ed7cab2.jpeg' }, { id: 1, first: 'Tom', last: 'Dale', avatar: 'https://si0.twimg.com/profile_images/1317834118/avatar.png' }, { id: 2, first: 'Yehuda', last: 'Katz', avatar: 'https://si0.twimg.com/profile_images/3250074047/46d910af94e25187832cb4a3bc84b2b5.jpeg' } ];