Dynamically add/remove single component instance

Design
1

{{#date-input fieldLabel=‘Depart’}} {{/date-input}} {{#view App.CalendarView elementId=“departFieldId”}} {{/view}}

{{#date-input fieldLabel=‘Return’}} {{/date-input}} {{#view App.CalendarView elementId=“returnFieldId”}} {{/view}}

I have a calendar component which shows up when the date-input field is clicked. Here is what my objects look like:

//Container View.

App.CalendarView = Ember.ContainerView.extend({ childViews: });

Controller

In init of my controller i create a calendar component object: var calendarComponent = App.CalendarComponent.create({ config values passed in… });

this.set(‘calendarComponent’, calendarComponent);

//On click action

    var containerView = Em.View.views[viewName]  //gets the container view with viewName
    var childView = this.get('calendarComponent'); //gets the component created on init.
    childView.removeFromParent();  //remove component from old field(removes from DOM). 
    containerView.pushObject(childView);  //add to new container view(each date input field has a container view     assosiated with it)

This all works fine. It removes and adds the calendar component at the right place in DOM.

Question: I had another version of this where in i was using jQuery to add/remove the component from DOM. On app start the calendar component was being rendered by default and using jquery i was getting the DOM element for the rendered calendar component and using it as per my needs.

Which of these approach you think is correct(or better)? The container view or jQuery? I didn’t benchmark anything but it felt its a little slower in case of container view.

Thanks