<!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="external nofollow" 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">
{{#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;
}
});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://img.zhankr.net/bohgyaf13yz49442.jpeg'
},
{
id: 1,
first: 'Tom',
last: 'Dale',
avatar: 'https://img.zhankr.net/jy2masnkqgp49443.png'
},
{
id: 2,
first: 'Yehuda',
last: 'Katz',
avatar: 'https://img.zhankr.net/xhjxrmthoml49444.jpeg'
}
];
