顯示與單獨控制器相關的模型

Question

我有一個型號爲WebsiteTemplate，屬於WebLayout。在UI中，我想顯示所有webLayouts的列表，但能夠將html類添加到其ID與webLayout相同的類。 webLayout屬於websiteTemplate，這是我們正在訪問的路線的模型。

有關如何做到這一點的任何想法？我知道我的設置也可能有根本性的錯誤，所以對此我很歡迎。看起來好像我想通過render與webLayout傳遞另一個參數，但這似乎不是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> 

我知道下面不工作，但這裏的想法，我試圖完成的僞代碼。

# 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

在第一次看，我看到的是缺少的是兩個模型之間的一對一關係的正確設置。

例子：

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

至於ID的，你可以寫一個自定義的車把幫助它們基本上是這樣的比較：

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

，然後用它是這樣的：

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

看到這裏的工作jsbin爲自定義助手。

希望它有幫助。