Not able delete json record Need help


#1

I am getting this.get(…).deleteRecord is not a function. I am sending my files

index.html

Ember Starter Kit

app.js


window.App = Ember.Application.create({ LOG_TRANSITIONS: true }); //App.ApplicationAdapter = DS.FixtureAdapter.extend();

/App.Router.map(function() { this.route(‘about’, {path : ‘about’}); this.route(‘posts’, {path : ‘posts’}); this.resource(‘post’, { path : ‘:post_id’}); });/ App.Router.map(function() { this.route(‘about’, {path : ‘about’}); this.route(‘posts’, function(){ this.resource(‘post’, { path : ‘:post_id’}); });
}); App.posts= [{ id:‘1’, title: ‘Angular JS’, author: {name: ‘Sandeep Rajpathak’}, date: ‘18-05-2015’, developedBy:‘Sandeep’, excerpt:‘There are lot of softwares available in this world. Great people are working hard on this now a days’, body:‘Angular JS is Java Script Frame work, to build Single Page Applications’ }, { id:‘2’, title: ‘Ember JS’, author: {name: ‘Tapas Ranjan’}, date: new Date(‘18-06-2015’), developedBy:‘Tapas’, excerpt:‘There are lot of softwares available in this world. Great people are working hard on this now a days’, body:‘Ember JS is Java Script Framework , to build Browser based Single Page Applications’ }, { id:‘3’, title: ‘BootStrap JS’, author: {name: ‘Hemanth Koruturu’}, date: new Date(‘18-08-2015’), developedBy:‘Hemanth’, excerpt:‘There are lot of softwares available in this world. Great people are working hard on this now a days’, body:‘BootStrap is CSS Frame Work, to build Responsive Web based Applications’ }

];

App.PostsRoute = Ember.Route.extend({ model: function() { return App.posts; } });

App.PostRoute = Ember.Route.extend({ model: function(params){ return App.posts.findBy(‘id’, params.post_id); } });

App.PostController = Ember.ObjectController.extend({
isEditing: false,
actions: {

        edit: function(){
            this.set('isEditing', true);
        },
        doneEditing: function(){
             this.set('isEditing', false);                
        },
        delete: function(){
          this.get('model').deleteRecord();
          this.get('model').save();
           this.transitionTo('posts'); 
                            
        }}

});

Ember.Handlebars.helper(‘format-date’, function(date){ //return moment().startOf(date).fromNow();
return moment().calendar(date);

});

var showdown = new Showdown.converter();

Ember.Handlebars.helper(‘format-mark’, function(input){ return new Ember.Handlebars.SafeString(showdown.makeHtml(input)); //return moment().calendar();

});

App.IndexRoute = Ember.Route.extend({ redirect: function(){ this.transitionTo(‘about’); } });


#2

That’s unreadable - format the code properly and I’ll have a shot at helping


#3

Could you please help how to format, when I am pasting it is not able format my code


#4

I am new to forum, so I don’t know how to format.


#5

####

Ember Starter Kit

#6
 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <title>Ember Starter Kit</title>  
  <link rel="stylesheet" href="css/normalize.css">  
  <link rel="stylesheet" href="css/style.css">  
   <link rel="stylesheet" href="css/bootstrap.css">  
   <link rel="stylesheet" href="css/bootstrap-theme.css">  
 </head>  
 <body>  
  <script type="text/x-handlebars">    
   <h3> Welcome To Ember App</h3>  
    <div class="navbar navbar-default navbar-fixed-top">  
     <div class="container">  
        <div class="navbar-header">  
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
          <span class="icon-bar"></span>  
          <span class="icon-bar"></span>  
       </button>  
          <h5><a class="navbar-brnad" href="#">Ember App</a></h5>  
         </div>  
         <div class="navbar-collapse collapse">  
         <ul class="nav navbar-nav">  
           <li class="btn btn-warning">{{#link-to 'about'}} About{{/link-to}}</li>  
           <li class="btn btn-warning">{{#link-to 'posts'}} Posts{{/link-to}}</li>  
         </ul>  
       </div>  
    </div>  
  </div>  
    {{outlet}}  
  </script>  
 <script type="text/x-handlebars" id="about">   
   <div class="container">      
     <div class="panel panel-primary">  
       <div class="panel-heading">HCL Technologies Ltd.</div>  
           <div class="panel-body">  
             <p>  
             <h5>  
               At the dawn of the new millennium, a unique company was born: HCL Technologies. As narrated in the video below, HCL Technologies has demonstrated remarkable growth through the recent economic downturn, emerging as one of only eight 21st century listed technology companies in the world to cross $1bn in Net Profit, $5bn in Revenue and $15bn in Market Capitalization.  
             </h5>  
             </p>  
           </div>  
      </div>  
   </div>  
 </script>  
 <script type="text/x-handlebars" id="posts">   
      <div class="container">  
      <div class="row">  
        <div class="col-sm-4 ">  
          <div class="panel panel-primary">  
            <div class="panel-heading"><p>Recent Posts</p></div>  
       <table class="table table-bordered">  
         <!--<tr><th>Recent Posts</th></tr>-->  
       <tr><td>  
         {{#each}}  
         {{#link-to 'post' this}}  
         {{author.name}}<br><hr>  
         {{/link-to}}  
        {{/each}}  
         </td></tr>  
          </table>  
          </div>  
        </div>  
        <div class="col-sm-8">{{outlet}}</div>  
      </div>   
     </div>  
 </script>  
 <script type="text/x-handlebars" id="post/_edit">  
   <p>{{input type="text" value = title}}</p>  
    <p>{{input type="text" value = author.name}}</p>  
   <!--<p>{{input type="text" value = excerpt}}</p>-->  
   <p>{{textarea value = body}}</p>  
 </script>  
 <script type="text/x-handlebars" id="post">  
     {{#if isEditing}}  
      {{partial 'post/edit'}}  
   <button type="button" class="btn btn-success" {{ action 'doneEditing'}}>Done</button>  
     {{else}}  
     <button type="button" class="btn btn-warning" {{ action 'edit'}}>Edit</button>  
     <button type="button" class="btn btn-warning" {{ action 'delete' }}>Delete</button>  
     {{/if}}  
       <div class="panel panel-primary">  
       <div class="panel-heading"><p>This Information About {{author.name}} Blog...</p></div>  
       <table class="table table-bordered">          
         <tr><th>Title</th><th>Author Name</th><th>Created Date</th></tr>          
         <tr><td>{{title}}</td><td>{{author.name}}</td><td>{{format-date date}}</td></tr>            
       </table>  
       <hr>  
        <!--<div class="intro">{{excerpt}}</div>-->  
       <h5>Description</h5>  
       <div class="below-the-fold">{{format-mark body}}</div>  
       </div>  
 </script>  
  <script src="js/libs/jquery-1.10.2.js"></script>  
  <script src="js/libs/ember-template-compiler-1.12.0.js"></script>  
  <script src="js/libs/ember-1.12.0.debug.js"></script>  
  <script src="js/libs/moment.js"></script>  
  <script src="js/libs/showdown.js"></script>  
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>-->  
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>-->  
  <script src="js/app.js"></script>  
  <script src="tests/runner.js"></script>  
  <script src="js/libs/bootstrap.min.js"></script>  
  <!-- to activate the test runner, add the "?test" query string parameter -->  
 </body>  
 </html>  

#7
 window.App = Ember.Application.create({  
   LOG_TRANSITIONS: true  
 });  
 //App.ApplicationAdapter = DS.FixtureAdapter.extend();  
 /*App.Router.map(function() {  
  this.route('about', {path : 'about'});  
  this.route('posts', {path : 'posts'});  
  this.resource('post', { path : ':post_id'});  
 });*/  
 App.Router.map(function() {  
  this.route('about', {path : 'about'});  
  this.route('posts', function(){  
  this.resource('post', { path : ':post_id'});  
  });     
 });  
  App.posts= [{  
   id:'1',  
   title: 'Angular JS',  
   author: {name: 'Sandeep Rajpathak'},  
   date: '18-05-2015',  
   developedBy:'Sandeep',  
   excerpt:'There are lot of softwares available in this world. Great people are working hard on this now a days',  
   body:'Angular JS is Java Script Frame work, to build Single Page Applications'  
   },  
   {  
   id:'2',  
   title: 'Ember JS',  
   author: {name: 'Tapas Ranjan'},  
   date: new Date('18-06-2015'),  
   developedBy:'Tapas',  
   excerpt:'There are lot of softwares available in this world. Great people are working hard on this now a days',  
   body:'Ember JS is Java Script Framework , to build Browser based Single Page Applications'  
   },  
    {  
   id:'3',  
   title: 'BootStrap JS',  
   author: {name: 'Hemanth Koruturu'},  
   date: new Date('18-08-2015'),  
   developedBy:'Hemanth',  
   excerpt:'There are lot of softwares available in this world. Great people are working hard on this now a days',  
   body:'BootStrap is CSS Frame Work, to build Responsive Web based Applications'  
   }  
 ];  
 App.PostsRoute = Ember.Route.extend({  
  model: function() {  
   return App.posts;  
  }  
 });  
 App.PostRoute = Ember.Route.extend({  
   model: function(params){  
     return App.posts.findBy('id', params.post_id);  
   }  
 });  
 App.PostController = Ember.ObjectController.extend({     
   isEditing: false,    
     actions: {  
       edit: function(){  
         this.set('isEditing', true);  
       },  
       doneEditing: function(){  
          this.set('isEditing', false);          
       },  
       delete: function(){  
        this.get('model').deleteRecord();  
        this.get('model').save();  
         this.transitionTo('posts');   
       }}  
 });  
 Ember.Handlebars.helper('format-date', function(date){  
   //return moment().startOf(date).fromNow();    
   return moment().calendar(date);  
 });  
 var showdown = new Showdown.converter();  
 Ember.Handlebars.helper('format-mark', function(input){  
   return new Ember.Handlebars.SafeString(showdown.makeHtml(input));  
   //return moment().calendar();  
 });  
 App.IndexRoute = Ember.Route.extend({  
  redirect: function(){  
  this.transitionTo('about');   
  }  
 });  

#8

I have formatted now could you please help me Wayne_Douglas. Please


#9

I have formatted. kindly help Wayne_Douglas


#10

Try this:

App.PostRoute = Ember.Route.extend({  
   model: function(params){  
     return App.posts.find(params.post_id);  
   }  
 });  
 App.PostController = Ember.ObjectController.extend({     
   isEditing: false,    
     actions: {  
       edit: function(){  
         this.set('isEditing', true);  
       },  
       doneEditing: function(){  
          this.set('isEditing', false);          
       },  
       delete: function(){  
           var _this = this;
           App.posts.find(this.get('model.id')).then(function(post){
                   post.deleteRecord();
                   post.save();
                   _this.transitionTo('posts');   
           });
       }}  
 });

#11

Hi Wayne_Douglas, I am sorry, I am getting Uncaught

##TypeError: callback.call is not a function error. Kindly help me is there any wrong place in html


#12

I am at work atm so can’t set up a js fiddle - I will try this evening if you haven’t sorted by then


#13

Sure, But please don’t forget to help. I will wait for your help, I am struggling last 2 day’s. There might be simple issue but I am struggling a lot.


#14

No problem, is there a reason you aren’t using ember-cli?


#15

I am new to Ember, just started, Don’t know what is the use of ember-cli. Definitely I will try to learn, could you please guide me which one is good for beginners. I really appreciate you are quick response. I got one very good fried. Thanks a lot…


#16

Lots of info here: http://www.ember-cli.com/

It takes a lot of the pain away of wiring things up and gives you a working application to start with.

Have a read and I will try and get a working repo set up for you tonight


#17

Any update on that issue.


#18

The model for your Post route is one of the objects defined in App.posts array. You are working with a plain javascript object here. In order to delete the object from array you need to do something like:

delete: function() {
    App.posts.removeObject(this.get('model'));
    this.transitionTo('posts');
}

#19

Thanks rytis, it’s working. But one small issue once refresh the page, again it is showing the same Record.


#20

Well that’s because your data is not persisted to database or browser’s local storage.