List of ul DOM element is undefined

[mulderp]

Hi!

I am having a problem with this line in the CollectionView:

 children = this.list.children(this.itemSelector);

Although I have set an el explicitly to an ul, there always comes this.list is undefined. I am suspecting something goes wrong in the initialization of the CollectionView:

         this.genres = new GenresUI({collection: genres, el: $(this.el).find("#genres")});

and this is the CollectionView:

    var GenresView = Backbone.CollectionView.extend({

        el: $("ul#genres"),
        itemView: filterItem,

        initialize: function() {
          this.listenTo(this.collection, "sync", this.render);
          this.collection.fetch();
        }
    });

    return GenresView;

[go-oleg]

Hi @mulderp ,

It looks like you may be using a rather old version of Backbone.CollectionView (the this.list line is not in the current source). Would it be possible for you to upgrade to the current one?

Also, it would be a good idea to call Backbone.CollectionView's initialize before doing your custom initialization logic so that collection view does what it needs to do:

initialize: function() {
  Backbone.CollectionView.prototype.initialize.apply( this, arguments );
  this.listenTo(this.collection, "sync", this.render);
  this.collection.fetch();
}

And just an FYI, the current version of Backbone.CollectionView uses the modelView option instead of itemView to specify the Backbone.View used to render each item in the collection.

Please let us know if that helps!

[mulderp]

Thanks! I will try.

Ok, the confusion is part of this version:

https://github.com/anthonyshort/backbone.collectionview

This gets fetched by bower, which is an old version (?)

[mulderp]

Ok, that works out of the box indeed!

PS A small observation I have 14 items, but see the render action of the modelView called 196 (= 14 * 14) times, is this OK, or is something wrong here?

[go-oleg]

That actually looks like a completely independently developed library with the same name! I can see where the confusion comes from...

As far seeing the render method called 196 times, I am only seeing it called once for each modelView when rendering an already built collection. Are you adding/removing elements from the collection after the collection view has been rendered? That could be the cause of the extra modelView render calls.

[mulderp]

I see it called 14 * 14 times. Here is my code:

layoutView:

     this.genres = new GenresView({collection: genres, el: $(this.el).find("#genres")});
     genres.fetch();

and collection view:

    var GenresView = Backbone.CollectionView.extend({
        //template: JST['app/scripts/templates/genres.ejs'],
        el: $("ul#genres"),
        modelView: filterItem,
        initialize: function() {
          Backbone.CollectionView.prototype.initialize.apply( this, arguments );
        }
    });

Do I miss something?

Thanks!

[go-oleg]

@mulderp ,

I assume you are calling this.genres.render(); after genres.fetch();?

This could've been caused by the fact that we re-render the collection view when a model is added or removed. I merged a fix into the dev branch (a51739c3727966c03be806e60a6a474979bf9ebb) so that we re-render the collection view only if it has already been rendered.

Hopefully that fixes your issue.

[mulderp]

Thanks a lot! It works great now.