Ember.ListView doesn't work with latest ember-cli (0.1.7)

Question

If I just run ember new testlistview and then in templates/index.hbs:

{{#collection Ember.ListView contentBinding="controller" height=500 rowHeight=50 width=500}}
  {{name}}
{{/collection}}

and in routes/index.js:

import Ember from 'ember';

    export default Ember.Route.extend({
      model: function() {
        var items = [];
        for (var i = 0; i < 10000; i++) {
          items.push({name: "Item " + i});
        }
        return items;
      }
    });

I get an error:

Uncaught Error: Assertion Failed: Ember.ListView must be a subclass or an instance of Ember.View, not

 DEBUG: -------------------------------
 DEBUG: Ember      : 1.8.1
 DEBUG: Ember Data : 1.0.0-beta.12
 DEBUG: Handlebars : 1.3.0
 DEBUG: jQuery     : 1.11.2
 DEBUG: -------------------------------

Does anyone know how to make it work or can offer any alternatives?

Also, what about Ember 1.9.1 and Handlebars 2.0.0 ?

https://github.com/emberjs/list-view/issues/188

Andrew Hacking Andrew Hacking · Accepted Answer · 2015-01-23T12:46:14

I've just forked the ember-cli-list-view and ember-list-view-component to get it working with the latest Ember CLI 0.1.7 and Ember 1.9.1 with handlebars 2.0.0.

I needed to use the latest master version of Ember ListView. I intend to raise a PR against the ember-cli-list-view package, but in the meantime, my fork of the add-on is available here: https://github.com/ahacking/ember-cli-list-view

You can install it by adding the following to package.json:

{
  "devDependencies": {
    "ember-cli-list-view": "ahacking/ember-cli-list-view#0.0.6-alpha.1"
  }
}

Then run npm install.

You won't be able to use ember generate ... since Ember CLI doesn't currently support adding bower packages at a URL. Instead you will need to add the ember-list-view-component package and zynga scroller to bower.json manually:

{
  "dependencies": {
    "ember-cli-list-view": "ahacking/ember-list-view-component#0.0.6-alpha.1",
    "zynga-scroller": "https://raw.github.com/zynga/scroller/master/src/Scroller.js",
    "zynga-scroller-animate": "https://raw.github.com/zynga/scroller/master/src/Animate.js"
  }
}

Then run bower install.

You will then need to add the following to Brocfile.js:

app.import("bower_components/zynga-scroller/index.js");
app.import("bower_components/zynga-scroller-animate/index.js");

Providing you have followed the above instructions precisely, you can then use Ember ListView and VirtualListView as follows:

// app/views/my-list-view.js
import Ember from 'ember';

// can also use Ember.VirtualListView (for iOS scrolling support)
export default Ember.ListView.extend({
  height: 500,
  rowHeight: 30,
  itemViewClass: Ember.ListItemView.extend({
    templateName: "some-item-template"
  })
});

Ember.ListView doesn't work with latest ember-cli (0.1.7)

1 Answers