Làm thế nào để hiển thị hai mô hình trên một trang EmberJS?

Question

Thiết lập cơ bản để hiển thị các phiên bản của hai mô hình khác nhau của hai loại khác nhau trên một "trang" là gì?

Ví dụ: tôi có hai mô hình, ví dụ: Cao đẳng và Sinh viên. Mỗi được lưu trữ trong một máy chủ REST. Trên một tuyến đường nhất định, tôi muốn kéo các trường hợp cụ thể của mỗi và hiển thị thuộc tính "tên" cho mỗi.

Đến từ thế giới Rails, tôi không hiểu khái niệm Model-View-Controller của EmberJS. Dường như trong EmberJS, mỗi bộ điều khiển có thể xử lý chỉ một kiểu mô hình. Vì vậy, điều này có nghĩa là một bộ điều khiển riêng biệt phải được sử dụng cho từng loại được hiển thị?

Answer 1

Trong trường hợp bạn tuân theo quy ước đặt tên, thì thực hành tốt nhất là có bộ điều khiển trên mỗi mô hình cho mỗi lượt xem, nhưng trong hầu hết các trường hợp, các yêu cầu khác nhau, bạn cũng có thể phân biệt với quy ước và để đáp ứng nhu cầu của bạn, bạn có thể khái niệm làm điều gì đó như thế này:

javascript

var App = Ember.Application.create(); 

App.IndexRoute = Ember.Route.extend({ 
    model: function(){ 
    return Ember.Object.create({post: App.Post.find(1), page: App.Page.find(1)}); 
    } 
}); 

App.Store = DS.Store.extend({ 
revision: 12, 
adapter: 'DS.FixtureAdapter' 
}); 

App.Post = DS.Model.extend({ 
title: DS.attr('string'), 
description: DS.attr('string') 
}); 

App.Page = DS.Model.extend({ 
title: DS.attr('string'), 
text: DS.attr('string') 
}); 

App.Post.FIXTURES = [ 
    { 
    id: 1, 
    title: "My super post", 
    description: "Lorem ipsum dolor sit amet..." 
    } 
]; 

App.Page.FIXTURES = [ 
    { 
    id: 1, 
    title: "My super page", 
    text: "Lorem ipsum dolor sit amet..." 
    } 
]; 

mẫu

<script type="text/x-handlebars"> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    <h2>{{model.post.title}}</h2> 
    <p>{{model.post.description}}</p> 
    <hr/> 
    <h2>{{model.page.title}}</h2> 
    <p>{{model.post.description}}</p> 
</script> 

Và ở đây, làm việc jsbin đó là khái niệm của chương trình.

Hy vọng nó giúp

Answer 2

This jsbin cho thấy một cách khác để hiển thị hai mô hình: mô hình org (với thuộc tính "name" và "mô tả") và mô hình thành viên (chỉ với các "tên" thuộc tính). JSBin được thiết lập với bộ điều hợp lưu trữ cục bộ, nơi bạn có thể nhập dữ liệu.

tay lái và html:

Here are the Orgs: 
    <ul> 
    {{#each model}} 
    <li>{{name}} - {{description}}</li> 
    {{/each}} 
    </ul> 

    Here are the Members: 
    {{#each member in members}} 
    <li>{{member.name}}</li> 
    {{/each}} 

Điều quan trọng là trong bộ điều khiển:

Javascript:

App.OrganizationRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Org.find(); 
    }, 
    setupController: function(controller, model) { 
    controller.set('members', App.Member.find()); 
    } 
}); 

(dựa trên this answer)