Ember.js Replace one component by another on model change

In my template I want to render one of two components (table or timeline) like this:

{{#with model as item}}
    {{#if renderTable}}
        {{render 'overview-table' item}}
    {{else}}
        {{render 'overview-timeline' item}}
    {{/if}}
{{/with}}

renderTable is bound to model: if there is only one element in the model - timeline is shown, if there are several - table is shown.

This way, there are two different controllers that backs the components: OverviewTableController and OverviewTimelineController and they are re-created on each model reloading. When the model is first loaded, everything works fine, but on model reloadings, some issues occure:

1. If the same component will be shown (i.e. was a table and replaced by another table), the model is first passed to the existing controller, which results in the hole component re-rendering with the new model, and then as far as template contains:

{{#with model as item}},

the component area is re-rendered and a new controller is created. So the issue is that the view is rendered twice on the model reloading.

2. The same issue but more incovinient: if a table component is replaced by a timeline component on model reloading, then, as far as the current controller is an OverviewTableController, the model that should be treated by OverviewTimelineController is first passed to OverviewTableController and then on the template re-rendering:

{{#with model as item}}

OverviewTimelineController is created and is passed the model.

IMHO re-rendering should start by parent views, and if needed to disconnect nested views/components with their respective controllers, and only then pass to nested views and components and controllers. Perhaps I am doing it wrong way?

Ember 1.9.1 handlebars 2.0