Uncaught TypeError: Cannot read property ‘_listenId’ of undefined – (Marionette, Backbone)

i have been experimenting with marionette's composite view but my scripts kept shooting out an error "Uncaught TypeError: Cannot read property '_listenId' of undefined". A thorough hack showed the "reset" event is never triggered by compositeview: view my code below: my template

<script type="text/template" id="staff-list">
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>course</th>
  </tr>
</thead>
    <tbody>
    </tbody>
</script>

<script type="text/template" id="staff-list-item">
    <td><%= fname %></td>
    <td><%= lname %></td>
    <td><%= course %></td>
</script>

list_view.js

View.Staff = Backbone.Marionette.ItemView.extend({
    tagName: "tr",
    template: "#staff-list-item",
});
View.Staffs = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    className: "table table-hover",
    template: "#staff-list",
    emptyView: NoStaffsView,
    itemView: View.Staff,
    itemViewContainer: "tbody",

    initialize: function(){
        this.listenTo(this.collection, 'reset', function(){
            console.log("reset is called"); //it appears this is never reached
            this.appendHtml = function(collectionView, itemView){
            collectionView.$el.append(itemView.el);
            }
        });
    },

    onCompositeCollectionRendered: function(){
        this.appendHtml = function(collectionView, itemView){
            collectionView.$el.prepend(itemView.el);
        }
    }
});

list_controller.js

define(["app","apps/staff/list/list_view"], function(SchoolManager, View){
    SchoolManager.module("Staff.List", function(List, SchoolManager,Backbone, Marionette, $, _){
        List.Controller = {
            listStaffs: function(){
                require(["entities/staff"], function(){
                var fetchingStaffs = SchoolManager.request("staff:entities");
                var contactsListLayout = new View.Layout();
                var contactsListPanel = new View.Panel();
                $.when(fetchingStaffs).done(function(staffs){
                    var contactsListView = new View.Staffs({
                        collection: staffs
                    });

                    contactsListLayout.on("show", function(){
                        contactsListLayout.panelRegion.show(contactsListPanel);
                        contactsListLayout.staffsRegion.show(contactsListView);
                    });
                    //console.log("dasud");
                //console.log(staffs);
                SchoolManager.mainRegion.show(contactsListLayout);
            });
        });
        }
    }
    });
    return SchoolManager.Staff.List.Controller;
});

entitystaff.js

define(["app","../config/storage/localstorage"], function(SchoolManager){
    SchoolManager.module("Entities", function(Entities, SchoolManager, Backbone, Marionette, $, _){
    // Private
    // -------------------------
  Entities.Staff = Backbone.Model.extend({
    urlRoot: "staff",

    defaults: {
      fname: "",
      lname: "",
      course: ""
      },



    }); 
    // Public
    // -------------------------
  Entities.configureStorage(Entities.Staff);
  Entities.StaffCollection = Backbone.Collection.extend({
    url: "staff",
    model: Entities.Staff,
  });

   Entities.configureStorage(Entities.StaffCollection);
var initializeStaffs = function(){
    contacts = new Entities.StaffCollection([
      { id: 1, fname: "Alice", lname: "Arten", course: "555-0184" },
      { id: 2, fname: "Bob", lname: "Brigham", course: "555-0163" },
      { id: 3, fname: "Charlie", lname: "Campbell", course: "555-0129" }
    ]);
    contacts.forEach(function(contact){
      contact.save();
    });
    return contacts.models;
  };

 var API = {
    getStaffEntities: function(){
      var staffs = new Entities.StaffCollection();
      var defer = $.Deferred();
      staffs.fetch({
        success: function(data,response, options){
     //console.log("we are winners");
          defer.resolve(data,response, options);
        }
      });
      var promise = defer.promise();
      $.when(promise).done(function(staffs){
        if(staffs.length === 0){
          // if we don't have any contacts yet, create some for convenience
         // var models = initializeContacts();
         console.log("no initialization");
         var models = initializeStaffs();
          staffs.reset(models);
 //        var models = initializeContacts();
//          staffs.reset(models);
         // contacts.reset(models);
        }
      });
      return promise;
    },

    getStaffEntity: function(staffId){
      var staff = new Entities.Staff({id: staffId});
      var defer = $.Deferred();
      setTimeout(function(){
        staff.fetch({
          success: function(data){
            defer.resolve(data);
          },
          error: function(data){
            defer.resolve(undefined);
          }
        });
      }, 2000);
      return defer.promise();
    }
  };

  SchoolManager.reqres.setHandler("staff:entities", function(){
    return API.getStaffEntities();
  });

  SchoolManager.reqres.setHandler("staff:entity", function(id){
    return API.getStaffEntity(id);
  });

});

return;
});

I dont know what is wrong with my code. i kept getting this error: Uncaught TypeError: Cannot read property '_listenId' of undefined

is there anything i am doing wrong? or there a deprecation in version?



Read more here: https://stackoverflow.com/questions/25737017/uncaught-typeerror-cannot-read-property-listenid-of-undefined-marionette

Content Attribution

This content was originally published by dasersoft at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: