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的检查产生未定义。

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

Answer 1

看起来像列表视图文档有问题。

这里有两个问题：

{{view}}帮助器不是块帮助器（据我所知。仅限FYI块帮助器是以{{#some-key-word}}开头并以{{/some-key-word}}结尾的帮助器） - 您无法在其中包装内容并在视图中显示该内容。
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}}

你如何使用Ember.js插件？

1 个答案: