How do you use Ember.js addons?

Question

I'm evaluating Ember.js for possible use in an upcoming project. I want to see now it fares with a long list of items, so I tried to installed the ember-list-view.

I ran the command:

ember install:addon ember-list-view

The syntax seems to have changed, so I ran

ember install ember-list-view

That activates npm, which downloaded the package successfully. I can see it in node_modules. Then per the documentation I created the following:

templates/test.hbs:

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

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

I added the route in router.js. When I go to the page, nothing shows up. According to Ember Inspector, the right template was being used and the data was there. A check on Ember.ListView in the console yield undefined.

Is there something more that needs to be done to bring in the code? Searches in the Ember and Ember-CLI documentation yielded no answer.

are you actually on the test route? Will you include your router as well? — Kingpin2k

jmurphyau jmurphyau · Accepted Answer · 2015-04-28T18:26:32

It looks like a problem with the list-view documentation.

There are two issues here:

The {{view}} helper is not a block helper (as far as I know. FYI a block helper is a helper that begins with {{#some-key-word}} and ends with {{/some-key-word}}) - You can't wrap content in it and have that content displayed in the view.
The list-view expects the property content not items

When you change the code to the following:

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

It works a little bit better (e.g. you can inspect the page and see item views being created) - but still not what you're expecting.

When you change the view keyword to the ember-list keyword (which ember-list-view registers as a helper) - everything works.

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

How do you use Ember.js addons?

1 Answers