Can you use an object oriented pattern with templates?

Design
1

Say I have a template that I want to use for a generic list of entities like so:

<script type="text/x-handlebars" data-template-name="entityList">
  {{#each}}
      <li>{{name}}</li>
  {{/each}}
</script>

Is it possible to use this with a concrete entityList like a games for instance?

  <script type="text/x-handlebars" data-template-name="games">
    {{entityList}}
  </script>

On the javascript side this works great. I have an ArrayController called EntityListController and I extend it to a GamesController. I’m just not sure how the EntityList can have access to my model so it can iterate over my list of games and be passed other propeties as well.

2

Unless you’re adding markup specific to the games template, you should be able to re-use the entity-list template by assigning the templateName property in the associated GamesView. Same template but different controller.

3

I’m sorry can you provide some code with this example. I’m still just a couple of days into this whole Ember stuff and currently (at least to my knowledge) I’m not using Views. I think I see what you’re saying though. The templates should be general themselves and don’t need to be extended?

4

I think what I might be looking for is renderTemplate inside the entity’s controller?

5

renderTemplate may work, but I’ve so far avoided doing anything like that.

You can declare a GamesView and Ember will automatically associate it with the GamesController. You aren’t required to define the views if there are no view-specific properties you wish to override.

App.GamesView = View.extend({
	// Ember would look for the template at 'games' by default.
	// Tell Ember to use the entityList template.
	templateName: 'entityList'
});

There are many other ways of making reusable code/templates in Ember. If you’d like to describe the intended use case more, I may have better suggestions. If seems like you may want a component that renders a list of whatever you pass in, and then you could make use the component on the games page.

6

May I ask why you try to avoid using it? From what I read from the docs it seems as though it’s just what I need.

It however does no work. Your technique does and I don’t understand why.

I just find it weird how I need to make a new class:

Spark.GameListView = Ember.View.extend({
  templateName: "entityList"
});

When adding something to the new class I already have doesn’t work:

Spark.GameListRoute = Ember.Route.extend({
  renderTemplate : function() {
    this.render("entityList");
  }
});
7

I avoid it just because it seems more low-level/sophisticated than necessary, and wherever possible I prefer to let Ember wire things together according to the naming conventions supported throughout the framework.

I agree it’s a bit annoying to declare a class for a single property, but using the templateName property of a view is more declarative, though you can override renderTemplate(controller, model) if you need to choose a different template according to the model.