Smashing Magazine Ember Tutorial

by amindunited

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<h1>This Code is Based on the: <br/> 
<a href="http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/">Smashing Magazine Ember Tutorial</a>
</h1>
<script src="//code.jquery.com/jquery-2.0.3.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="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div class="main">
      <h1>Hello World</h1>
          {{outlet}}
        {{render Other}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="index">
    {{#link-to "users"}}Goto the Users Page{{/link-to}}
</script>
<script type="text/x-handlebars" data-template-name="other">
    -- other -- 
    {{title}}
</script>
<script type="text/x-handlebars" data-template-name="users">
    <div class="numUsers">{{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>
    <div class="userDetails">
        {{outlet}}
    </div>
    {{#link-to "users.create" class="create-btn"}} Add user {{/link-to}}
    {{#link-to "index"}}Home{{/link-to}}
</script>

<script type="text/x-handlebars" data-template-name="user">
    {{#if deleteMode}}
<div class="confirm-box">
  <h4>Really?</h4>
  <button {{action "confirmDelete"}}> yes </button>
  <button {{action "cancelDelete"}}> no </button>
</div>
{{/if}}
    <div class="user-profile">
        <button {{action "edit"}}>Edit</button>
        
        <button {{action "delete"}}>Delete</button>
  <img {{bind-attr src="avatarUrl"}} alt="User's avatar" />
 ...

CSS

.handle {
    background-color: #cdcdcd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: groove 2px #dedede;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    cursor: pointer;
    font-size: 9pt;
    font-weight: bold;
}

.resizeHandle {
    width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid gray;
    position: absolute;
    bottom: 0px;
    right: 0px;
    opacity: .5;
    -webkit-transform:translateX(2px) translateY(7px) rotate(45deg);
    -o-transform:translateX(2px) translateY(7px) rotate(45deg);
    transform: translateX(2px) translateY(7px) rotate(45deg);
}
.draggable.class {
    width: 50%;
    height: 50%;
    position:absolute;
    background-color: #ededed;
}
.draggable.class ul {
    list-style-type:none;
    margin:0px;
    padding-left:0px;
}
.draggable.class li:nth-child(odd) {
   background-color:#dfdfdf; 
};

JavaScript

//Instantiate the applicattion
App = window.App = Em.Application.create({
    rootElement: "#app"
});

//Create a data fisture adapter
App.ApplicationAdapter = DS.FixtureAdapter;

//Create a User Model
App.User = DS.Model.extend({
    name: DS.attr(),
    email: DS.attr(),
    bio: DS.attr(),
    avatarUrl: DS.attr(),
    creationDate: DS.attr()
});
//The User Fixtures:
App.User.FIXTURES = [{
  id: 1,
  name: 'Sponge Bob',
  email: '[email protected]',
  bio: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
  avatarUrl: 'http://jkneb.github.io/ember-crud/assets/images/avatars/sb.jpg',
  creationDate: 'Mon, 26 Aug 2013 20:23:43 GMT'
}, {
  id: 2,
  name: 'John David',
  email: '[email protected]',
  bio: 'Lorem ispum dolor sit amet in voluptate fugiat nulla pariatur.',
  avatarUrl: 'http://jkneb.github.io/ember-crud/assets/images/avatars/jk.jpg',
  creationDate: 'Fri, 07 Aug 2013 10:10:10 GMT'
}];

App.Router.map(function(){
  this.resource('users', function(){
    this.resource('user', { path:'/:user_id' }, function(){
      this.route('edit');
    });
    this.route('create');
  });
});

App.UsersRoute = Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});
App.UserEditRoute = Ember.Route.extend({
  model: function(){ 
      console.log("userEdit");
    return this.modelFor('user');
  }
});
App.UsersCreateRoute = Ember.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 reuse the user/edit template
  // associated with the usersCreateController
  renderTemplate: function(){
    this.render('user.edit', {
      controller: 'usersCreate'
    });
  }
});
//The tutorial said nothing about attaching this template,
// so I created a view for it and passed the template name
App.UserEditView = Em.View.extend({
    //templateName:"userEdit"
});

//The user route isn't really nessesary, but it would look...