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

Question

如果我只是运行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

Answer 1

我刚刚 fork 了 ember-cli-list-view 和 ember-list-view-component 以使其能够与最新的 Ember CLI 0.1.7 配合使用以及带 Handlebars 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 generated ... 因为 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"
  })
});