Emberjs loading dynamic subview

Question

I'm just getting started with emberjs and I have some problems understanding how to dynamically change views within a view.

I want to have a page with a calendar. This page has some buttons on the top to switch between different calendar views (day, week, month) and some filter options for the appointments within this view.

See this mockup:

Currently I have created a calendar route and a CalendarIndexView and template. This template will contain the basic filter and view toggle buttons. Within the index view I can call another view to display the grid.

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

The collection/context that is attached to these different views should not change because the filter is also applied on this.

The problem I have is that I don't know how to change the monthView to for example dayView after the "day" button is clicked. Should I handle this in a router, controller or in the main calendar view? If not view the router, how would make this view switching dynamic?

Answer 1

One of the core strengths of Ember is the router - everything is driven by the URL. I don't think you should part from that.

1. Use different routes for the different views within a calendar resource (in the router):

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

2. Set the model on the calendar resource

3. In the nested routes ( day , week (you could make month the default by using the calendar index route for it) ), use the same model as in the calendar route, just filter it down to what you want. eg:

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

4. For the people filter create a computed property in the controller that filters the events on the model and use that in the templates instead of the actual model. In that, if a person is selected, you can filter out any events without that person.

    selectedPerson: null, // bind that eg 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. Better than (4.): Do the filtering via query parameters . That way, you could be very flexible and even build powerful text search pretty easily...

Hope that helps and happy to see different approaches...