Ember.js adding and removing views from the DOM?

Question

I am looking into ember.js, after working with SproutCore 1 previously. I am looking for some examples on how to add and remove views from the DOM as the user navigates the application.

For instance, I have an application that contains a set of cases and each case has a workflow. There are also administration pages, etc.

When the user starts up the app, a dashboard-like user interface is shown. From here the user is able to search or click on a case in order to bring up that case. At this point I want to do the following:

• I want to remove the GUI for the Dashboard, and i want to show the GUI for the case - which is a complex GUI in itself with its own set of navigation rules etc.
• Also, within the case I want to add and remove portions of the GUI as the user navigates and manipulates the case.
• When the user clicks on the "Dashboard" link, I want the current GUI to be removed, and the dashboard to be added again.

As this will be a somewhat large application I am not sure if toggling the isVisible parameter is sufficient, or if other measures needs to be taken in order to not overload the user's browser.

Is there a guide, or an example that shows how to do this ?

Answer 1

WARNING: OUTDATED ANSWER

A view inherits from Ember.View which means it gets some key methods. append(), which appends to body, appendTo(arg) which takes an argument and remove().

The argument is a jQuery style selector of where to insert the element in the DOM.

// my view
App.PartsView = Ember.View.extend({
    ...
});


// create/insert my view
App.partsView = App.PartsView.create();
App.partsView.appendTo('#partcontainer');

In my code I have a <div id="partcontainer"></div>.

// remove from DOM
App.partsView.remove();

The documentation has a good part on Building a View Hierarchy and later a section on Ember.ContainerView depending on whether you want to do it all programatically or not.