如何在一個EmberJS頁面上顯示兩個模型？

Question

在一個「頁面」上顯示兩種不同類型的兩種不同型號實例的基本設置是什麼？

例如，我有兩種模式，比如學院和學生。每個都存儲在REST服務器中。在特定的路線上，我想拉取每個特定的實例並顯示每個實例的「name」屬性。

來自Rails世界，我不太瞭解EmberJS的Model-View-Controller概念。看來在EmberJS中，每個控制器只能處理一種模型類型。那麼這是否意味着必須爲每種類型顯示一個單獨的控制器？

Answer 1

如果你嚴格按照命名約定，那麼你的假設是正確的，最佳實踐是每個模型的每個視圖都有一個控制器，但是在大多數需求不同的情況下，你也可以偏離該約定，並且滿足你的需要，你可以概念做這樣的事情：

的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..." 
    } 
]; 

模板

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

這裏工作jsbin該節目的概念。

希望它可以幫助

Answer 2

This jsbin顯示了另一種方式來顯示兩種模式：組織模型（與屬性「name」和「說明」）和會員模型（只用「名」屬性）。 JSBin使用本地存儲適配器進行設置，您可以在其中輸入數據。

車把和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}} 

的關鍵是在控制器：

的Javascript：

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

（基於this answer）