using different ListItemViews through itemViewForIndex() throws 'Uncaught TypeError'

[MaxSanKyu]

Hey,

I'm using Ember 1.8.1 and Ember-CLI 0.1.9

My View looks like this:

import Ember from "ember";

export default Ember.ListView.extend({
  height: 400,
  elementWidth: 265,
  rowHeight: 300,
  width: 1625,

  itemViews: {
    "playlist" : Ember.ListItemView.extend({
      templateName: "partials/playlists-list-view-item",
    }),
    "playlist2" : Ember.ListItemView.extend({
      templateName: "partials/playlists-list-view-item2",
    })
  },

  itemViewForIndex: function(idx){
    if(idx === 0) {
      return this.itemViews['playlist'];
    } else {
      return this.itemViews['playlist2'];
    }
  },
});

The initial rendering of the page works. But when I start scrolling the list and the first element disappears I get the following error:

Uncaught TypeError: Cannot read property 'previousSibling' of null          ember.js:44175
 Morph.insert                                                               ember.js:10799
 Renderer_insertElement                                                     ember.js:10674
 Renderer_renderTree                                                        ember.js:40771
 merge.ensureChildrenAreInDOM                                               ember.js:40736
 View.extend._ensureChildrenAreInDOM                                        ember.js:679
 DeferredActionQueues.invoke                                                ember.js:749
 DeferredActionQueues.flush                                                 ember.js:135
 Backburner.end                                                             ember.js:190
 Backburner.run                                                             ember.js:18223 
 run                                                                        list-view.js:818
 (anonymous function)                                                       ember.js:14927 
 instrument                                                                 list-view.js:796
 __exports__.default.Ember.Mixin.create._scrollContentTo                    list-view.js:421
 __exports__.default.Ember.ContainerView.extend.scrollTo                    ember.js:19673
 apply                                                                      ember.js:19245 
 superWrapper                                                               list-view.js:415 
 __exports__.default.Ember.ContainerView.extend.scroll                      list-view.js:401 
 _scroll                                                                    jquery.js:4430 
 jQuery.event.dispatch                                                      jquery.js:4116 
 elemData.handle

Maybe someone here knows why or can point me in the right direction?

[stefanpenner]

i believe this is fixed in the pack branch

https://github.com/emberjs/list-view/blob/master/packages/list-view/lib/list_view_mixin.js#L137-L147 should actually be: https://github.com/emberjs/list-view/blob/pack/packages/list-view/lib/list_view_mixin.js#L228-L239

[MaxSanKyu]

Thanks for the quick answer. I tried it out but unfortunately the error still shows up :(

[stefanpenner]

can you put together a jsbin or a failing test?

[MaxSanKyu]

No need, already solved it by also replacing createChildViewsMorph()

      render: function (buffer) {
        var element          = buffer.element();
        var dom              = buffer.dom;
        var container        = dom.createElement('div');

        container.className  = 'ember-list-container';
        element.appendChild(container);

        this._childViewsMorph = dom.appendMorph(container, container);

        return container;
      },

      createChildViewsMorph: function (element) {
        this._childViewsMorph = this._renderer._dom.appendMorph(element.lastChild, element.lastChild);
        return element;
      },

Thanks so much for your help!

[stefanpenner]

seems like a bug we should fix, that being said, im not sure why createChildViewsMorph is needed here at all. @jasonmit do you remember why?