ember-app for debug

gistfile1.js

EmBlog = Ember.Application.create({
  LOG_TRANSITIONS: true
});
 
 
EmBlog.Comment  = DS.Model.extend({
  body: DS.attr('string'),
  post: DS.belongsTo('post')
});
 
EmBlog.Post = DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
  comments: DS.hasMany('comment')
});
 
 
EmBlog.Router.reopen({
  location: 'history'
 // rootURL: '/'
});
 
EmBlog.Router.map(function() {
  this.resource('posts', {path: '/posts'}, function(){
    this.route('new');
  
    //routes to /posts/:post_id
    this.resource('post', {path: '/:post_id/'}, function(){
        this.route('edit', {path: '/edit'});
       
        //routes to /:post_id/comments
        this.route('comments', {path:  '/comments'});
        this.route('newComment');
        this.route('comment', {path: '/comments/:comment_id'});    
        this.route('editComment', {path: '/comments/:comment_id/edit'});
              
    });
      
  });
});

gistfile2.js

EmBlog.PostsRoute  = Ember.Route.extend({
     actions: {
      
       removePost: function(post) {
          //deletes record from ember-data store
          post.deleteRecord();
         
          //persist change to your backend server
          post.save().then(
            function() {
              this.transitionTo('posts.index');
            }, 
            function(error) {
           // work with person that failed to save
              if (error.status == 422) {
                alert("Validation error");
              } else {
                alert("Something went wrong, try again");
              }  
            }
          );
        }
    }
   
});
 
 
 
EmBlog.PostsIndexRoute  = Ember.Route.extend({
  model: function(){
    return this.store.find('post');
  },
  setupController: function(controller, model){
     this._super(controller, model);
     //controller.set('content', model);
  }
    
});
 
EmBlog.PostsNewRoute  = Ember.Route.extend({
 
    model: function(){
      return this.store.createRecord('post');
    },
 
    exit: function() {
      this._super();
      this.get('currentModel').rollback();
    },
 
  actions: {
   
    save: function(post) {
      post.save().then(
        function(){
          this.transitionToRoute('post.index', post);
            
        }, 
        function(error){
           if (error.status == 422) {
             alert("Validation error");
           } else {
              alert("an error occured -- Pls try again")
           }
         }
       );
    },
    
    cancel: function() {
      this.transitionTo('posts.index');
    }
 
  }
 
});
 
EmBlog.PostCommentsRoute = Ember.Route.extend({
  setupController: function(controller, model) {
        comments = this.controllerFor('post').get('comments');
        controller.set('content', comments);
  },
  
   actions: {
     
     removeComment: function(comment) {
       //deletes record from ember-data store
        comment.deleteRecord();
       
        //persist change to your backend server
        comment.save().then(
          function() {
            this.controllerFor('postNewComment').set('isEditing', false);
            this.transitionTo('post.index');
          }, 
          function (error){
            // work with person that failed to save
            //comment.rollback();
            alert("An error occured - Please try again");
           }
        );
     }
     
   } 
   
});
 
EmBlog.PostNewCommentRoute = Ember.Route.extend({
  
  model: function() {
    var post = this.modelFor('post');
    return this.store.createRecord('comment', {post: post});
 },
 
  setupcontroller: function( controller, model) {
     this._super();
     controller.set('content', model);
     controller.addComment();
 
  },
 
  actions: {   
     save: function(comment){
       comment.save().then(
         function() {
           this.controllerFor('postNewComment').set('isAddingNew', false);
           this.transitionTo('post.index');
         }, 
         function(error) {
          // work with person that failed to save
           comment.rollback();
            alert("An error occured - Please try again");
          }
       );   
     },
   
    cancel: function(comment) {
      this.controllerFor('postNewComment').set('isAddingNew', false);
      this.transitionTo('post.index');   
    } 
   
  }
  
});

gistfile3.js

<div class="container-fluid">
  <div class="row-fluid">
    <div class="navbar">
      <div class="nav-inner">
       <a class="brand" href="#"> Emblog </a>
      
       <ul class="nav">
         
         <!--  <li {{bindAttr class='isPosts:active'}}> {{#link-to 'posts.index'}} Post {{/link-to}}</li>  -->
 
        <li {{bindAttr class='isHome:active'}}> {{#link-to 'index'}} Home {{/link-to}}</li>
         <li><a href='/posts'> Posts </a> </li>
       </ul>
 
          <ul class="nav pull-right">
             <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Profile
                <b class="caret"> </b>
              </a>
              
               <ul class="dropdown-menu">
                 <li> <a href="#"> settings </a></li>
                 <li class="divider"> <li>
                 <li> <a href="#"> Log out </a> </li>
               </ul>
             </li>
           </ul>
 
      </div>
 
    </div>
 
  </div>
 
<!-- sidebar & master view -->
 
 <div class="row-fluid">
     <ul class="nav nav-list span3 well">
       <li> {{#link-to 'index'}} Home {{/link-to}} </li>
       <li> {{#link-to 'posts.index'}} Post {{/link-to}}</li>
     </ul>
  
<!-- details view for main content area. click the sidebar it will display here -->
    <div class="span9 well">
     {{outlet}}
    </div>
 
  </div>  <!-- closes the div for clas='row-fuid' -->
 
</div>
 
 
<div class="container-fluid">
  <div class="row-fluid">
   
      <table class="table">
        <thead>
          <tr><th> Recent Blog Posts</th> </tr>
        </thead>
         
         <tr>
           <td> <h3> {{title}} </h3> </td> 
         </tr>
          <tr>
           <td> {{body}} </td> 
          
           <td class='form-actions'>
           {{#link-to 'post.edit' this class='btn'}} Edit{{/link-to}}
           <a href='#'{{action removePost this}} class='btn btn-danger'> Destroy </a>
           </td>
          
           <td></td>
          </tr>
            <!-- appears before comments -->
            <tr> <td> {{#link-to "post.newComment"}} Add comment{{/link-to}}</td></tr>
            <tr><td>{{render 'post.comments' comments}}</td></tr>
      </table>
       <br />
           <p class="btn  btn-primary"> {{#link-to 'posts.index'}} back {{/link-to}}</p>
    
    <div>
    {{outlet}}
    </div>
  </div>
</div>
 
<h1>Comments</h1>
    <br/>
 
    {{#each controller}}
     <tr> 
    <td>{{body}} </td>
    <td class="form-actions">
  {{#link-to "post.editComment" this class='btn'}} Edit{{/link-to}}
    <!-- <a href='#' {{action 'removeComment' this}} class="btn btn-danger"> Destroy </a> -->
 <a href='#' {{action 'destroyMe' this target="controller.controllers.postEditComment"}} class="btn btn-danger"> Destroy </a>
   </td>
    </tr> 
    {{/each}}
    
    <!-- works even if we don't pass in body -->
   <!--  {{render 'post.comment' body}} -->