如何在一个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）