Find file
Fetching contributors…
Cannot retrieve contributors at this time
283 lines (250 sloc) 9.73 KB
<!doctype html public="♥">
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
/* minimum styling possible */
* { -webkit-box-sizing:border-box; box-sizing:border-box; }
body { width:960px; margin:0 auto; }
#your-app { overflow:hidden; padding:1px; }
.users-listing { float:left; width:200px; height:330px; padding:20px; }
.users-listing a.active { font-weight:bold; }
.user-profile { border:1px solid #ddd; border-radius:3px; float:left; overflow:hidden; width:460px; height:330px; padding:20px; position:relative; }
.user-profile img { float:left; margin:0 20px 20px 0; }
.user-edit { border:1px solid #ddd; border-left:none; float:left; height:330px; padding:20px; background:#ebebeb; }
.create-btn { display:inline-block; border:1px solid #ccc; padding:2px 10px; margin:10px 0; background:#eee; }
label { display:block; margin-bottom:2px; margin-top:3px; }
input, textarea { border:1px solid #ccc; border-radius:3px; box-shadow:none; min-width:220px; padding:5px; }
.confirm-box { display:inline-block; border:1px solid #ddd; background:#f1f1f1; border-radius:3px; padding:12px; position:absolute; right:12px; }
h5 { margin-top:0; }
</style>
</head>
<body>
<!-- TEMPLATES -->
<!-- application template -->
<script type="text/x-handlebars" id="application">
<div id="your-app">
<h3>Hello World</h3>
{{outlet}}
</div>
</script>
<!-- users template -->
<script type="text/x-handlebars" id="users">
{{#link-to "users.create" class="create-btn"}} Add user {{/link-to}}
<div>Users: {{usersCount}}</div>
<ul class="users-listing">
{{#each user in controller}}
<li>
{{#link-to "user" user}}
{{user.name}}
{{/link-to}}
</li>
{{else}}
<li>no users… :(</li>
{{/each}}
</ul>
{{outlet}}
</script>
<!-- single user template -->
<script type="text/x-handlebars" id="user">
<div class="user-profile">
{{#if deleteMode}}
<div class="confirm-box">
<h5>Really?</h5>
<button {{action "confirmDelete"}}> yes </button>
<button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}
<button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
<img {{bind-attr src="avatarUrl"}}>
<h2>{{name}}</h2>
<span>{{email}}</span>
<p>{{bio}}</p>
<span>Created {{formatDate creationDate}}</span>
</div>
{{outlet}}
</script>
<!-- single user edit template - also used by the create route -->
<script type="text/x-handlebars" id="user/edit">
<div class="user-edit">
<div>
<label>Choose user avatar</label>
{{input value=avatarUrl}}
</div>
<div>
<label>User name</label>
{{input value=name}}
</div>
<div>
<label>User email</label>
{{input value=email}}
</div>
<div>
<label>User short bio</label>
{{textarea value=bio}}
</div>
<div>
<br/>
<button {{action "save"}}> ok </button>
</div>
</div>
</script>
<!-- just for the purpose of the demo - creates few users in the Local Storage -->
<script src="../assets/js/libs/createUsersInLocalStorage.js"></script>
<!-- DEPENDENCIES -->
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="//builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="//builds.emberjs.com/tags/v1.1.2/ember.js"></script>
<script src="//builds.emberjs.com/tags/v1.0.0-beta.3/ember-data.js"></script>
<script src="localstorage_adapter.js"></script>
<!-- APP CODE -->
<script>
// app initialization
window.App = Em.Application.create({
LOG_TRANSITIONS: true
});
// Adapter initialization
// App.ApplicationAdapter = DS.FixtureAdapter;
App.ApplicationAdapter = DS.LSAdapter;
// the model for a user
App.User = DS.Model.extend({
name : DS.attr(),
email : DS.attr(),
bio : DS.attr(),
avatarUrl : DS.attr(),
creationDate : DS.attr()
});
// FIXTURE data
/*App.User.FIXTURES = [{
id: 1,
name: 'Sponge Bob',
email: 'bob@sponge.com',
bio: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
avatarUrl: '../assets/images/avatars/sb.jpg',
creationDate: '2013-08-26'
}, {
id: 2,
name: 'John David',
email: 'john@david.com',
bio: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
avatarUrl: '../assets/images/avatars/jk.jpg',
creationDate: '2013-08-07'
}];*/
// router initialization
App.Router.map(function(){
this.resource('users', function(){
this.resource('user', { path:'/:user_id' }, function(){
this.route('edit');
});
this.route('create');
});
});
// index route
App.IndexRoute = Em.Route.extend({
redirect: function(){
this.transitionTo('users');
}
});
// users route
App.UsersRoute = Em.Route.extend({
model: function(){
return this.store.find('user');
}
});
// users array controller
App.UsersController = Em.ArrayController.extend({
sortProperties: ['name'],
sortAscending: true, // false = descending
usersCount: function(){
return this.get('model.length');
}.property('@each')
});
// single user route - dynamic segment
App.UserRoute = Em.Route.extend({
model: function(params){
return this.store.find('user', params.user_id);
}
});
// single user controller
App.UserController = Em.ObjectController.extend({
deleteMode: false,
actions: {
delete: function(){
// the delete method only toggles deleteMode value
this.toggleProperty('deleteMode');
},
cancelDelete: function(){
// set deleteMode back to false
this.set('deleteMode', false);
},
confirmDelete: function(){
// this will tell Ember-Data to delete the current user
this.get('model').deleteRecord();
this.get('model').save();
// and then go to the users route
this.transitionToRoute('users');
// set deleteMode back to false
this.set('deleteMode', false);
},
edit: function(){
this.transitionToRoute('user.edit');
}
}
});
// singe user edit form route
App.UserEditRoute = Em.Route.extend({
model: function(){
return this.modelFor('user');
}
});
// single user edit form controller
App.UserEditController = Em.ObjectController.extend({
actions: {
save: function(){
var user = this.get('model');
user.save();
this.transitionToRoute('user', user);
}
}
});
// user creation form route
App.UsersCreateRoute = Em.Route.extend({
model: function(){
// the model for this route is a new empty Ember.Object
return Em.Object.create({});
},
// in this case (the create route) we can re-use the user/edit template
// associated with the usersCreateController
renderTemplate: function(){
this.render('user.edit', {
controller: 'usersCreate'
});
}
});
// user creation form controller
App.UsersCreateController = Em.ObjectController.extend({
actions: {
save: function () {
// just before saving, we set the creationDate
this.get('model').set('creationDate', new Date());
// save and commit
var newUser = this.store.createRecord('user', this.get('model'));
newUser.save();
// redirects to the user itself
this.transitionToRoute('user', newUser);
}
}
});
// formatDate helper - with moment.js
/*Em.Handlebars.helper('formatDate', function(date){
return moment(date).fromNow();
});*/
Em.Handlebars.registerBoundHelper('formatDate', function(date){
return moment(date).fromNow();
});
</script>
</body>
</html>