Failed to use deleteRecord() of ember-model

Question

Here,I am trying to delete row from table on click of row delete option (cross sign). But it is throwing an error Uncaught TypeError: Object 2 has no method 'call'

Here,I am displaying data from model as follow :

<tbody>                           
    {{#each item in model}}
        {{#each item in item.cart_items}}
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.qty}}</td>
            <td>{{item.price}}</td>
            <td>{{item.subtotal}}</td>
            <td><button type="button" {{action 'deleteproduct' item.id}} class="close" aria-hidden="true" >&times;</button></td>
        </tr>   
        {{/each}}
    {{/each}}                                                             
</tbody>

Structure of above fixture is as follow :

Astcart.Application.adapter = Ember.FixtureAdapter.create();

Astcart.Application.FIXTURES = [
    {
        "logged_in": {
            "logged": true,
            "username": "sachin",
            "account_id": "4214"
        },
        "cart_items": [
            {
                "id": "1",
                "name": "Samsung Galaxy Tab 2",
                "qty": "1",
                "price": "1245.12",
                "subtotal": "1245.12"
            },
            {
                "id": "2",
                "name": "Samsung Galaxy Tab 2",
                "qty": "2",
                "price": "1500.00",
                "subtotal": "3000.00"
            },
            {
                "id": "3",
                "name": "Samsung Galaxy Tab 2",
                "qty": "5",
                "price": "100.00",
                "subtotal": "500.00"
            }
        ]           
    }
];

Here,I am trying to delete row from table :

deleteproduct: function(productID){
    if (window.confirm("Are you sure you want to delete this record?")) {           
        var result = this.get('model').map(function(application) {
            console.log(JSON.stringify(application.get('cart_items')));
            console.log(JSON.stringify(application.get('cart_items').find(productID)));
            application.get('cart_items').deleteRecord(application.get('cart_items').find(productID));
            application.get('cart_items').commit();
        });
    }
}

I have posted my complete code here. Can anyone help me to make this fiddle work?

Update

I have updated my code here deleteRecord is working fine in above fiddle but how to delete record from an array which is part (one of the node) of fixture.

cart_items is an array and node of fixture as explained above.

I have posted my complete code here. Can anyone help me to make this fiddle work?

Answer 1

You could just send the item through the action

<td><button type="button" {{action 'deleteproduct' item}} class="close" aria-hidden="true" >&times;</button></td>

And then delete it

Astcart.IndexController = Ember.ArrayController.extend({
    deleteproduct: function(product){
        if (window.confirm("Are you sure you want to delete this record?")) {               
            product.deleteRecord();
        }
    }
}); 

Don't forget to run the fixture adapter on the model:

Astcart.Cart_items.adapter = Ember.FixtureAdapter.create();