Wyświetlanie modelu skojarzonego z oddzielnym kontrolerem

Question

Mam model WebsiteTemplate należący do WebLayout. W interfejsie użytkownika chcę wyświetlić listę wszystkich webLayouts, ale mogę mieć dodaną klasę html do tej, której identyfikator jest taki sam jak webLayout. webLayout należy do websiteTemplate, który jest modelem trasy, którą odwiedzamy.

Wszelkie pomysły, jak to zrobić? Jestem świadomy, że mogłem mieć coś zasadniczo nie tak z moją konfiguracją, więc przemyślenia na ten temat są mile widziane. Wygląda na to, że chciałbym przekazać inny parametr do render z konkretnym webLayout, ale nie wydaje się to być sposób Ember.

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

wiem następujące nie pracę, ale tutaj jest pseudo-kod idei próbuję osiągnąć.

# 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

Na pierwszy rzut oka brakuje tego, co widzę, to poprawna konfiguracja relacji jeden do jednego między dwoma modelami.

Przykład:

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

chodzi o porównanie identyfikatorów można napisać niestandardowe kierownicy pomocnika, które w zasadzie wyglądają następująco:

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

a następnie używać go tak:

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

Zobacz tutaj działający jsbin dla niestandardowego pomocnika.

Mam nadzieję, że to pomaga.