Emberjs 加载动态子视图答案

【问题标题】：Emberjs loading dynamic subviewEmberjs 加载动态子视图
【发布时间】：2014-08-14 19:12:17
【问题描述】：

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

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

查看这个模型：

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

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

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

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

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

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('events.@each.attendee', 'selectedPerson')

优于 (4.)：通过 query parameters 进行过滤。这样，您可以非常灵活，甚至可以轻松构建强大的文本搜索...

希望能有所帮助并乐于看到不同的方法...

【讨论】：

感谢您的精彩回答，这绝对有帮助！