# Deletion of records only works the first time. Uncaught TypeError: view.destroy is not a function

**URL:** <https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140>\
**Category:** Uncategorized\
**Created:** [June 4, 2015, 1:14pm UTC](https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140 "2015-06-04T13:14:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AvonBarksdale](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/avonbarksdale/32/10905_2.png) [@AvonBarksdale](https://discuss.emberjs.com/u/AvonBarksdale)\
**Post date:** [June 4, 2015, 1:14pm UTC](https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140/1 "2015-06-04T13:14:49Z")

</div>

I’m trying to write a todo app with Ember. I’m following some guides, but I’m not doing things exactly as the guide and deletion of records is not working.

This is what I’ve got: **router**

```
Router.map(function() {
  this.route('home', {'path': '/'});
  this.resource('todos', {'path': '/todos' }, function() {
    this.resource('todo', {'path': ':/todo_id' })
    this.route('new', {'path': '/new'} )
  });
});

```

**todo-details component**

```
<li>
  {{#if isEditing}}
    {{input type="text" class="edit" value=todo.title focus-out="acceptChanges" insert-newline="acceptChanges"}}
  {{else}}
    {{input type="checkbox" class="toggle" checked=todo.isCompleted}}
    <label {{action 'editTodo' on 'doubleClick'}}>{{todo.title}}</label><button class="destroy" {{action 'destroyTodo'}}></button>
  {{/if}}
</li>

{{yield}}

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['completed'],
  completed: function() {
    return this.get('todo.isCompleted');
  }.property('todo.isCompleted'),
  actions: {
    editTodo: function() {
      this.set('isEditing', true);
    },
    acceptChanges: function() {
      this.set('isEditing', false);
      this.sendAction('edit', this.get('todo'));
    },
    destroyTodo: function() {
      this.sendAction('destroy', this.get('todo'));
    }
  }
});

```

**todos.index template**

```
{{input type="text" id="new-todo" placeholder="What needs to be done?" value=newValue action="createTodo"}}

<section id="main">
    <ul id="todo-list">
        {{#each model as |todo|}}
            {{todo-item todo=todo edit="editTodo" destroy="destroyTodo"}}
        {{/each}}
    </ul>

    <input type="checkbox" id="toggle-all">
</section>

<footer id="footer">
    <span id="todo-count">
        <strong>2</strong> todos left
    </span>
    <ul id="filters">
        <li>
            <a href="all" class="selected">All</a>
        </li>
        <li>
            <a href="active">Active</a>
        </li>
        <li>
            <a href="completed">Completed</a>
        </li>
    </ul>

    <button id="clear-completed">
        Clear completed (1)
    </button>
</footer>

```

**todos.index controller**

```
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    createTodo: function() {
      this.get('newValue');
      var newTodo = this.store.createRecord('todo', {title: this.get('newValue'), isCompleted: false});
      this.set('newValue', '');
    },
    editTodo: function(todo) {
      if (Ember.isEmpty(todo.get('title'))) {
        this.send('destroyTodo', todo);
      }
      else {
        todo.save();
      }
    },
    destroyTodo: function(todo) {
      debugger;
      todo.deleteRecord();
    }
  }
});

```

The first time I want to delete a todo record, it successfully does it, but it logs to the console `Uncaught TypeError: view.destroy is not a function`. From there on, it stops deleting todos.

In case it’s useful: [https://github.com/FranGoitia/todo](https://github.com/FranGoitia/todo)

Thanks.

---

<div class="post-metadata">

**Author:** ![FractalizeR](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/fractalizer/32/10929_2.png) [@FractalizeR](https://discuss.emberjs.com/u/FractalizeR)\
**Post date:** [June 5, 2015, 7:30am UTC](https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140/2 "2015-06-05T07:30:01Z")

</div>

> [@AvonBarksdale](#):
>
> this.sendAction(‘destroy’, this.get(‘todo’));

It seems like you named a handler “destroyTodo”, but sending an action named “destroy”.

---

<div class="post-metadata">

**Author:** ![AvonBarksdale](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/avonbarksdale/32/10905_2.png) [@AvonBarksdale](https://discuss.emberjs.com/u/AvonBarksdale)\
**Post date:** [June 5, 2015, 12:37pm UTC](https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140/3 "2015-06-05T12:37:59Z")

</div>

Yes, because when I call the component from the index controller I’m passing destroy as being equal to destroyTodo.

```
<ul id="todo-list">
        {{#each model as |todo|}}
            {{todo-item todo=todo edit="editTodo" destroy="destroyTodo"}}
        {{/each}}
</ul>

```

---

<div class="post-metadata">

**Author:** ![FractalizeR](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/fractalizer/32/10929_2.png) [@FractalizeR](https://discuss.emberjs.com/u/FractalizeR)\
**Post date:** [June 5, 2015, 1:30pm UTC](https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140/4 "2015-06-05T13:30:57Z")

</div>

I am not sure, but it seems you just pass parameter to a component named “destroy”. Does this also affect action name?

Can you try to send action named “destroyTodo”?

---

<div class="post-metadata">

**Author:** ![AvonBarksdale](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/avonbarksdale/32/10905_2.png) [@AvonBarksdale](https://discuss.emberjs.com/u/AvonBarksdale)\
**Post date:** [June 5, 2015, 4:00pm UTC](https://discuss.emberjs.com/t/deletion-of-records-only-works-the-first-time-uncaught-typeerror-view-destroy-is-not-a-function/8140/5 "2015-06-05T16:00:16Z")

</div>

That was my first setup. From the template I was calling a component action and inside there I was sendting the action destroyTodo to the route/controller. It didn’t work. After re-reading the documentation on components I found out that when you are going to use the sendAction method inside the component, the value you pass to this function needs to be a variable that you setup when calling the component. Summary:

```
- component is being called from todos.index template and destroy=destroyTodo is passed as well
- component template calls its destroyTodo action when button is clicked. 
- destroyTodo action in todos.index controller is callled by sending destroy action from destroyTodo action in component.

```