Ember.js add and remove views from the DOM?

Question

I am learning ember.js after working with SproutCore 1 earlier. I am looking for some examples of how to add and remove views from the DOM when the user navigates to the application.

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

When the user launches the application, a user interface similar to the panel is displayed. From here, the user can search or click on a case to open this case. At this point I want to do the following:

• I want to remove the GUI for the control panel, and I want to show the GUI for this case - it is a complex GUI in itself with its own set of navigation rules, etc.
• In addition, in this case, I want to add and remove portions of the graphical user interface when the user navigates and manipulates this case.
• When a user clicks on the "My Account" link, I want the current graphical interface to be deleted and the toolbar to be added again.

Since this will be a somewhat large application, I’m not sure if setting the isVisible parameter is enough, or if other measures are necessary to not overload the user's browser.

Is there a guide or example showing how to do this?

Answer 1

WARNING: FIND ANSWER

The view is inherited from Ember.View , which means that it gets some key methods. append() , which is added to the body , appendTo(arg) , which takes an argument and remove() .

The argument is a jQuery style selector where you want to insert an element into 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 <div id="partcontainer"></div> .

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

The documentation has a good share in Building a hierarchy of views , and then the Ember.ContainerView section, depending on whether you want to do this all programmatically or not.