Hiển thị mô hình được kết hợp với bộ điều khiển riêng

Question

Tôi có kiểu WebsiteTemplate thuộc về WebLayout. Trong giao diện người dùng, tôi muốn hiển thị danh sách tất cả các số webLayouts nhưng có thể có lớp html được thêm vào id có id giống như webLayout. webLayout thuộc về websiteTemplate, là mô hình cho tuyến đường mà chúng tôi đang truy cập.

Bất kỳ ý tưởng nào về cách thực hiện việc này? Tôi biết rằng tôi có thể có một cái gì đó về cơ bản sai với thiết lập của tôi là tốt, vì vậy suy nghĩ về điều đó được chào đón. Có vẻ như tôi muốn chuyển một thông số khác đến render với số webLayout cụ thể, nhưng điều này dường như không phải là cách 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> 

Tôi biết sau không làm việc, nhưng đây là pseudo-code của ý tưởng tôi đang cố gắng để đạt được.

# 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

Cái nhìn đầu tiên mà tôi thấy bị thiếu là thiết lập chính xác mối quan hệ một-một giữa hai kiểu máy.

Ví dụ:

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

Đối với sự so sánh của id bạn có thể viết một helper tay lái tùy chỉnh mà về cơ bản sẽ trông như thế này:

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

và sau đó sử dụng nó như thế này:

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

Xem tại đây đang hoạt động jsbin cho trình trợ giúp tùy chỉnh.

Hy vọng điều đó sẽ hữu ích.