Ember.ListView 不适用于最新的 ember-cli (0.1.7)答案

【问题标题】：Ember.ListView doesn't work with latest ember-cli (0.1.7)Ember.ListView 不适用于最新的 ember-cli (0.1.7)
【发布时间】：2015-01-19 14:15:13
【问题描述】：

如果我只运行ember new testlistview，然后运行templates/index.hbs：

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

在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;
      }
    });

我得到一个错误：

未捕获的错误：断言失败：Ember.ListView 必须是 Ember.View 的子类或实例，而不是

 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: -------------------------------

有谁知道如何使它工作或可以提供任何替代方案？

另外，Ember 1.9.1 和 Handlebars 2.0.0 怎么样？

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

【问题讨论】：

标签： javascript listview ember.js infinite-scroll

【解决方案1】：

我刚刚将ember-cli-list-view 和ember-list-view-component 分叉，以使其与最新的Ember CLI 0.1.7 和带有把手2.0.0 的Ember 1.9.1 一起使用。

我需要使用 Ember ListView 的最新主版本。我打算针对 ember-cli-list-view 包提出 PR，但与此同时，我的附加组件分支可在此处获得： https://github.com/ahacking/ember-cli-list-view

您可以通过将以下内容添加到package.json来安装它：

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

然后运行npm install。

您将无法使用 ember generate ...，因为 Ember CLI 目前不支持在 URL 中添加 bower 包。相反，您需要手动将 ember-list-view-component 包和 zynga 滚动条添加到 bower.json：

{
  "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"
  }
}

然后运行bower install。

然后您需要将以下内容添加到Brocfile.js：

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

如果您严格按照上述说明进行操作，则可以按如下方式使用 Ember ListView 和 VirtualListView：

// 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"
  })
});

【讨论】：