How to map component's properties to the model?

Question

In my Ember app I'm iterating through an array of models and rendering a component for each one:

{{#each}}
  {{content-box provider=provider type=type author=author link=link createdDate=created_date media=media summary=summary text=text title=title thumbnails=thumbnails}}
{{else}}
  No results :(
{{/each}}

As you can see, there is a lot of redundancy in this mapping. Is there a way to just map all properties at once?

Should I be using a view? I'm still pretty confused when to use a view vs. component. I've read a couple of articles about that and I got the impression that I should be using a component when I want reusability, which seems right here.

Answer 1

It is possible to easily pass all those parameters as a single object inside the {{#each}} helper. In your view template:

{{#each}}
  {{content-box content=this}}
{{/each}}

And, in your component template:

{{#with content}}
  Provider: {{provider}}
  Type: {{type}}
{{/with}}

Here is a working JSBin.

FYI, You can name the content property anything you like. The {{with}} helper is optional but means you shorten {{content.provider}} to {{provider}}.