你如何使用 Ember.js 插件？

Question

我正在评估 Ember.js 是否可以在即将到来的项目中使用。我现在想看看它的项目列表很长，所以我尝试安装 ember-list-view。

我运行了命令：

ember install:addon ember-list-view

语法好像变了，所以跑了

ember install ember-list-view

这会激活 npm，它会成功下载包。我可以在 node_modules 中看到它。然后根据我创建的文档：

模板/test.hbs：

{{#view 'list-view' items=model height=500 rowHeight=50 width=500}}
  {{name}}
{{/view}}

路由/test.js

import Ember from 'ember';

// define index route and return some data from model
export default Ember.Route.extend({
  model: function() {
    var items = [];
    for (var i = 0; i < 10000; i++) {
      items.push({name: "Item " + i});
    }
    return items;
  }
});

我在 router.js 中添加了路由。当我转到页面时，什么都没有显示。根据 Ember Inspector 的说法，使用了正确的模板并且数据就在那里。在控制台中检查 Ember.ListView 会产生 undefined。

还有什么需要做的才能引入代码吗？在 Ember 和 Ember-CLI 文档中的搜索没有得到任何答案。

Answer 1

列表视图文档似乎有问题。

这里有两个问题：

1. {{view}} 助手不是块助手（据我所知。仅供参考，块助手是一个以 {{#some-key-word}} 开头并以 {{/some-key-word}} 结尾的助手） - 你不能包装内容并在视图中显示该内容。

2. list-view 期望属性 content 而不是 items

当您将代码更改为以下内容时：

{{view 'list-view' content=model height=500 rowHeight=50 width=500}}

它工作得更好一些（例如，您可以检查页面并查看正在创建的项目视图） - 但仍然不是您所期望的。

当您将 view 关键字更改为 ember-list 关键字（ember-list-view 注册为帮助程序）时 - 一切正常。

{{#ember-list items=model height=500 rowHeight=50 width=500}}
  {{name}}
{{/ember-list}}