Emberjs加载动态子视图

debugcn 发表于 Dev

丹尼·希姆斯特拉（Danny Hiemstra）

我刚刚开始使用emberjs，但在了解如何在视图中动态更改视图时遇到一些问题。

我想要一个带有日历的页面。此页面的顶部有一些按钮可以在不同的日历视图（日，周，月）之间切换，还可以为此视图中的约会使用一些过滤器选项。

看到这个样机：在此处输入图片说明

目前，我已经创建了一个日历路线以及一个CalendarIndexView和模板。该模板将包含基本的过滤器和视图切换按钮。在索引视图中，我可以调用另一个视图来显示网格。

<div class="calendar-container">
  {{view monthView}}
</div>

附加到这些不同视图的集合/上下文不应更改，因为过滤器也应用于此。

我遇到的问题是，在单击“天”按钮后，我不知道如何将monthView更改为例如dayView。我应该在路由器，控制器还是在主日历视图中处理此问题？如果不查看路由器，将如何使该视图动态切换？

贾瓦达达

Ember的核心优势之一是路由器-一切都由URL驱动。我认为您不应该退出。

对日历资源（在路由器中）中的不同视图使用不同的路由：

this.resource('calendar', { path: '/calendar' }, function() {
  this.route('day');
  this.route('week');
  this.route('month');
});

在日历资源上设置模型
在嵌套路线（day，week （您可以使用，将月份设置为默认值calendar index route））中，使用与日历路线相同的模型，只是将其过滤为所需的内容。例如：
```
export default Ember.Route.extend({
  model: function() {
    return this.modelFor('calendar').filter(function(event) { ... });
  }
});
```

对于人员过滤器，在控制器中创建一个计算属性，该属性可过滤模型上的事件，并在模板中而不是实际模型中使用该属性。这样，如果选择了某个人，则可以过滤掉没有该人的任何事件。

selectedPerson: null, // bind that e.g. to a select with all the people or change that with an action

filteredEvents: function() {
  if (! this.get('selectedPerson')) {
    return this.get('events');
  }
  return this.get('events').filterBy('attendee', this.get('selectedPerson'));
}.property('[email protected]', 'selectedPerson')