Anzeige eines Modells, das einem separaten Controller zugeordnet ist

Question

Ich habe ein Modell WebsiteTemplate, das zu einem WebLayout gehört. In der Benutzeroberfläche möchte ich eine Liste aller webLayouts anzeigen, aber in der Lage sein, eine HTML-Klasse hinzugefügt zu haben, deren ID die gleiche wie webLayout ist. webLayout gehört zu websiteTemplate, das ist das Modell für die Route, die wir besuchen.

Irgendwelche Ideen, wie man das macht? Ich bin mir bewusst, dass ich etwas grundlegend falsch mit meinem Setup auch haben könnte, so dass Gedanken dazu willkommen sind. Es scheint, als würde ich einen anderen Parameter an render mit dem spezifischen webLayout übergeben, aber das scheint nicht der Ember Weg zu sein.

# 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> 

Ich weiß, dass die folgenden nicht Arbeit, aber hier ist Pseudo-Code der Idee zu erreichen, ich versuche.

# 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

Auf den ersten Blick, was ich sehe fehlt ist die korrekte Einrichtung einer Eins-zu-Eins-Beziehung zwischen zwei Modellen.

Beispiel:

# 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") 

Was den Vergleich der ids Sie einen benutzerdefinierten Lenker Helfer schreiben könnte, die im Grunde würde wie folgt aussehen:

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

und es dann wie folgt verwenden:

Sehen Sie hier eine funktionierende jsbin für den benutzerdefinierten Helfer.

Ich hoffe, es hilft.