Delete a record in Ember data not working

Question

I have a table (a component) and a delete button in each row. When the the delete button is clicked the specific row should be deleted.

Tried the following code:

MyComponent.js

  import Ember from 'ember';

   export default Ember.Component.extend({
   actions:{
    deleteCartRecord(cartDetails){
        debugger;
        this.sendAction('deleteRecord',cartDetails);
    }
 }

});

In MyComponent.hbs

{{#each model.orderParts as |newCart|}} 
  <div class="card-wrapper col-lg-12 col-md-12">
     <div class="col-lg-2 col-md-2">
        <div class="order-id">{{newCart.partNumber}}</div>
       {{#if (gte newCart.promiseQty newCart.quantity)}}
    <div class="order-status delivered">{{env.APP.StockAvailable}}</div>
    {{else}} {{#if (gt newCart.promiseQty '0'(and (lt newCart.promiseQty newCart.quantity)))}}
    <div class="order-status intransit">{{env.APP.LowInStock}}</div>
    {{else}} {{#if (eq newCart.promiseQty '0')}}
    <div class="order-status outofstock">{{env.APP.OutofStock}}</div>
    {{/if}} {{/if}} {{/if}}
</div>
<div class="col-lg-3 col-md-3">
    <div class="item-header">Delivery Date</div>
    <div class="item-data">{{newCart.deliveryDate}}</div>
</div>
<div class="col-lg-2 col-md-2">
    <div class="item-header">Required Qty.</div>
    <div class="item-data">
        {{increse-required-quantity incresedQuantity=newCart.quantity}}
    </div>
</div>
<div class="col-lg-2 col-md-2">
    <div class="item-header">Unit Price</div>
    <div class="item-data">{{newCart.unitPrice}}</div>
</div>
<div class="col-lg-2 col-md-2">
    <div class="item-header">Total Price</div>
    <div class="item-data">{{newCart.partTotalPrice}}</div>
</div>
<div class="col-lg-1 col-md-1 button-colum"><button type="button" class="btn btn-danger" {{action "deleteCartRecord" newCart}}>Delete</button>             </div>
  </div>
 {{/each}} 

My Controller

   import Ember from 'ember';
   export default Ember.Controller.extend({
     actions:{
        deleteRecord(data){
          debugger; 
            let confirmation = confirm("are you sure to delete");
            if(confirmation)
            {
               debugger;
               data.deleteRecord();
               data.save();

            }
       }
  }
});

The template file in which component is called

    <hr>
</div>

<div class="col-lg-12 col-md-12">
    <div class="checkout-summery-wrapper">
        <div class="total-label">Total</div>
        <div class="total">{{model.totalPrice}}</div>
        <!--<div class="tax-text">( Inclusive of all taxes )</div>-->
        <div class="place-order-button"><button type="button" class="btn siemens-btn">Place Order</button></div>
    </div>
</div>

<div class="col-lg-12 col-md-12">
    {{#if model.orderParts.isGeneric}}
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Generic Parts</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            {{cart-record model = model}}
        </div>
    </div>
    {{/if}}
    {{#unless model.orderParts.isGeneric}}
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Hot Gas Path</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            {{cart-record model = model deleteRecord=(action 'deleteRecord')}}
        </div>
    </div>
    {{/unless}}
</div>

MyRoute

 import Ember from 'ember';

  export default Ember.Route.extend({
     model: function()
     {
             return this.get('store').queryRecord('cart',{userId:1})
     }

  });

My Serializer

  import DS from 'ember-data';

  export default DS.JSONSerializer.extend(DS.EmbeddedRecordsMixin, {
       primaryKey: 'totalPrice',

       attrs: {
        orderParts:
       {
           serialize: 'records',
           deserialize: 'records'
       }

    }

 });

I have the following issues:

1. In MyComponent.hbs, will newCart being passed as a parameter delete all the records or the specific record I want deleted?
2. Any ideas on why MyController is not invoked from the component?
3. Is this the correct way of deleting a record in ember?

Thank you in advance.

Answer 1

In MyComponent.hbs newCart is passed as a parameter will this delete all the record or the specific record i want?

It will delete the particular record alone. if you want to delete all the record then you can try unloadAll('model-name')

MyController is not invoked from the component why is that?

You need to send action upcon calling component, {{my-component deleteRecord=(action 'deleteRecords') }} . Actually real problem is, you are calling deleteRecord but in controller you got deleteRecords.

Is this the correct way of deleting a record in ember?

If you want to delete right away then you can use destroyRecord this will delete and save record immediately

Answer 2

Well, your example is full of bugs...

1. In MyComponent.hbs, will newCart being passed as a parameter delete all the records or the specific record I want deleted?

Nope.
Firstly, you need to understand that the result of store.query in your route returns a DS.ManyArray(an Array like object, which is model in your example) contains group of DS.Model instances (which should be newCart in your example, but you must change to {{#each model as |newCart|}} first). And only this DS.Model has method .save() and .deleteRecord().
The action you set on the button is {{action "deleteCartRecord" newCart.partNumber}}, so you actually passing a property called partNumber to deleteRecord and running deleteRecord and save on this property. Unless this partNumber is a DS.belongsTo pointing to another DS.Model, or it cannot work at all.
But what you wanted is to delete newCart, right?

2. Any ideas on why MyController is not invoked from the component?

Your invoke is right. But since your component is full of bugs, it must be throwing exceptions somewhere else and the app cannot run already.

3. Is this the correct way of deleting a record in ember?

I think I answered enough in the first question.