Visualizzazione di un modello associato a un controller separato

Question

Ho un modello WebsiteTemplate appartenente a WebLayout. Nell'interfaccia utente voglio visualizzare un elenco di tutti i webLayouts ma essere in grado di avere una classe html aggiunta a quella il cui id è lo stesso di webLayout. webLayout appartiene a websiteTemplate, che è il modello per il percorso che stiamo visitando.

Qualche idea su come fare questo? Sono consapevole che potrei avere qualcosa di fondamentalmente sbagliato anche nel mio setup, quindi i pensieri su questo sono ben accetti. Sembra che vorrei passare un altro parametro a render con lo specifico webLayout, ma questo non sembra essere il modo 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> 

So che il seguente non lavoro, ma qui è pseudo-codice dell'idea che sto cercando di realizzare.

# 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

Al primo sguardo ciò che vedo che manca è la giusta messa a punto di una relazione uno-a-uno tra due modelli.

Esempio:

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

Per quanto riguarda il confronto tra i id si potrebbe scrivere un manubrio personalizzati aiutante che avrebbe sostanzialmente simile a questa:

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

e quindi utilizzarlo in questo modo:

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

Vedere qui a jsbin funzionante per l'helper personalizzato.

Spero che aiuti.