javascript - モデルはバックボーン コレクションから削除されません

Question

コレクションからモデルを削除 (破棄) しようとしています。データは groupedBy であり、アコーディオン スタイルにレンダリングされます。しかし、コンソールで X をクリックすると通知が表示されます。

Uncaught Uncaught TypeError: Cannot call method 'destroy' of undefined  


   (function() {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Router: {}
    };
    window.vent = _.extend({}, Backbone.Events);
})();

// !models.js

App.Models.Item = Backbone.Model.extend({});

// !collections.js

App.Collections.Items = Backbone.Collection.extend({
    model: App.Models.Item,
    url: 'api/items.json'
});

// !views.js

App.Views.Items = Backbone.View.extend({

    el: '#items',
    events: {
      'click .cccc':'deleteItem',
    },
    deleteItem: function() {
      this.model.destroy();  
    },
    initialize: function() {
     this.listenTo( this.collection, "change", this.render );
     this.template = _.template( document.getElementById('productsCategoriesTemlate').innerHTML );
     this.render();
     this.$el.accordion({ animate: 0 });
    },
    getGroups : function(){
       return _.groupBy(this.collection.toJSON(), 'category');
    },
    render: function() {
        this.el.innerHTML = this.template({ data : this.getGroups() });

    },

    addOne: function(item) {
       // ????????????
    }
});

App.Views.Item = Backbone.View.extend({
      deleteItem: function() {
      this.model.destroy();  
      },

      // ???????????
 });

// !router.js

App.Router = Backbone.Router.extend({
    routes: {
        '':'index',
    },
    index: function() {
        console.log('index page !');
    },
});

new App.Router;
Backbone.history.start();

App.items = new App.Collections.Items;
App.items.fetch().then(function() {
    new App.Views.Items({ collection: App.items });
});

テンプレート ：

<script id="productsCategoriesTemlate" type="text/template">
    <% _.each( data, function( category, i ){  %>
        <h3 class="category-name"><%= i %></h3>
        <div><% _.each( category, function( item ){ %>
            <li class="product"><%= item.title %><p style="float:right;" class="cccc">X</p></li>
            <% }) %>
        </div>
   <% }) %>
</script>