如何在一个EmberJS页面上显示两个模型?

时间:2013-05-20 21:59:39

标签: ember.js

在一个“页面”上显示两种不同类型的两种不同模型的实例的基本设置是什么?

例如,我有两个模型,比如学院和学生。每个都存储在REST服务器中。在某个路径上,我想拉出每个的特定实例,并为每个实例显示“name”属性。

来自Rails世界,我不太了解EmberJS的模型 - 视图 - 控制器概念。似乎在EmberJS中,每个控制器只能处理一种模型类型。那么这是否意味着必须为每种类型显示一个单独的控制器?

2 个答案:

答案 0 :(得分:4)

在ember中,如果严格遵循命名约定,那么您的假设是正确的,最佳实践是每个视图的每个模型都有一个控制器,但在大多数情况下,要求不同,您也可以偏离约定,并且满足您的需求您可以从概念上执行以下操作:

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

希望有所帮助

答案 1 :(得分:0)

This jsbin显示了显示两个模型的另一种方法:组织模型(具有属性“name”和“description”)和成员模型(仅具有“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