2
votes

Let's say I'd like to display TOP3 users: kind of hall of fame and shame. Data comes from two different resources. The view and template is the same.

I'd like to know which block helper I should use. View? Control, or maybe do some magic with render (one instance, I know, I know) and how I can customize the view, providing it some data.

The following solution is as follows:

<div id="top3" class="row">
  {{view App.Top3View controllerBinding="controllers.top" label="Hall of Fame" blankState="Wanna be here? Be
  nice to other people!"}}

  {{view App.Top3View controllerBinding="controllers.loser" label="Hall of Shame" blankState="No one here!"}}
</div>

As you can see, I want to provide some data to customize it.

// top3.handlebars
<h2>{{view.label}}</h2>
{{#if controller.content}}
<ul>
  {{#each user in controller.content}}
  <li>
    <img {{bindAttr src="user.gravatar" title="user.name"}} />
  </li>
  {{/each}}
</ul>
{{else}}
<p>{{view.blankState}}</p>
{{/if}}

App.Top3View = Em.View.extend
  classNames: ['col-span-6']
  templateName: 'top3'

I wonder where e.g label should come from? Maybe it should belong to a controller? I'd like to know if this is the way it should be written in Ember?

Please share your thoughts.

1

1 Answers

1
votes

I'd like to know which block helper I should use. View? Control, or maybe do some magic with render

Not sure there's a right or wrong answer here. Generally i would go with simplest solution that can possibly work, so view helper is the right place to start. Like the built-in ember views (Ember.TextField, etc.) your TOP3 view is pretty simple. Since it does not need to maintain it's own state or contain any business logic there's no need for it to have it's own controller.

and how I can customize the view, providing it some data. I wonder where e.g label should come from? Maybe it should belong to a controller?

Either is ok, just depends on where you expect them to come from. Using view properties is a solid choice for things you expect to be defined in the template. So whomever is including the view can either hard-code the values as you've done in the example or bind them to something like labelBinding=controllers.top.label. If these properties are always going to be available in the controller, then it might make sense to replace {{view.label}} with just {{label}} in top3.handlebars. That said i think your view-property solution is the most elegant.

I'd like to know if this is the way it should be written in Ember?

Yeah i think you've got it right.