Displaying a model associated with a separate controller

Question

I have a model WebsiteTemplate that belongs to a WebLayout. In the UI I want to display a list of all of the webLayouts but be able to have an html class added to the one whose id is the same as webLayout's. webLayout belongs to websiteTemplate, which is the model for the route we are visiting.

Any ideas on how to do this? I'm aware that I could have something just fundamentally wrong with my setup as well, so thoughts on that are welcome. It seems like I'd want to pass in another parameter to render with the specific webLayout, but this doesn't seem to be the Ember way.

# website_template model
App.WebsiteTemplate = DS.Model.extend
 webLayout: DS.belongsTo("App.WebLayout")

# website_layout model
App.WebLayout = DS.Model.extend
 name: DS.attr("string"),
 thumbnail: DS.attr("string")

# router
App.Router.map ->
 @resource "website_template", path: "/website_template/:website_template_id"

# website_template route
App.WebsiteTemplateRoute = Ember.Route.extend
 setupController: ->
 @controller.set 'webLayouts',  App.WebLayout.find()

# website_template template
{{webLayout.id}}
{{render "_webLayouts" webLayouts}}

# web_layouts template
<ul>
 {{#each controller}}
  <li>
   <a href="#" {{ action "addLayout" this }}>
    <img alt="Thumbnail" {{ bindAttr src="thumbnail" }}>
    {{ name }}
   </a>
  </li>
 {{/each}}
</ul>

I know the following doesn't work, but here's pseudo-code of the idea I'm trying to accomplish.

# website_template template
{{render "_webLayouts" webLayouts webLayout}}

# web_layouts template
<ul>
 {{#each webLayouts in controller}}
   {{#if webLayouts.id is webLayout.id}}
    <li class="selected">
   {{else}}
    <li>
   {{/end}}
    <a href="#" {{ action "addLayout" this }}>
    <img alt="Thumbnail" {{ bindAttr src="thumbnail" }}>
    {{ name }}
   </a>
  </li>
 {{/each}}
</ul>

Answer 1

At the first look what I see is missing is the correct setup of an one-to-one relation between two models.

Example:

# website_template model
App.WebsiteTemplate = DS.Model.extend
  webLayout: DS.belongsTo("App.WebLayout")

# website_layout model
App.WebLayout = DS.Model.extend
  name: DS.attr("string"),
  thumbnail: DS.attr("string"),
  websiteTemplate: DS.belongsTo("App.WebsiteTemplate")

As for the comparison of the id's you could write a custom handlebars helper which would basically look like this:

Ember.Handlebars.registerHelper('equal', function(value1, value2, options) {
  if (value1 === value2) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

and then use it like this:

{{#equal webLayouts.id webLayout.id}}
  are equal
{{else}}
  not equal
{{/equal}}

See here a working jsbin for the custom helper.

Hope it helps.