Emberjs加载动态子视图

Question

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

我希望有一个包含日历的页面。 此页面顶部有一些按钮可在不同的日历视图（日，周，月）之间切换，以及此视图中约会的一些过滤器选项。

查看此模型：

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

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

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

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

Answer 1

Ember的核心优势之一是路由器 - 一切都是由URL驱动的。我不认为你应该参与其中。

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

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

2. 在日历资源上设置模型

3. 在嵌套路线（day，week 中（您可以使用calendar index route将月份设为默认值）），使用与日历路线中的模型相同，只需将其过滤到您想要的。 e.g：

   export default Ember.Route.extend({
     model: function() {
       return this.modelFor('calendar').filter(function(event) { ... });
     }
   });
   

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

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

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

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