How to prevent views from being destroyed in Ember.js

Question

Quick note:

I don't believe this is a duplicate of Ember.js: Prevent destroying of views. Other related questions that I've found are out-of-date.

In case this becomes out-of-date later, I am using Ember 1.7.0 with Handlebars 1.3.0.

Context for the question:

As the title states, I am wondering how to transition between views without destroying them. Using queryParams does not solve my issue.

I am creating a calculator with the following nested views:

>>Calculator View
    >>Report View (hasMany relationship to Calculator)
      --School Partial (I am using queryParams here)

I am able to navigate between the Report views just fine without destroying my School partial, since I am using queryParams and using a displaySchoolPartial boolean to show/hide the partial. Example below:

Report template (stripped to only show the essential part):

<script type="text/x-handlebars" data-template-name="calculator/report">
    ...
    {{#link-to "calculator.report" (query-parameters displaySchoolPartial="true")}}
    {{render "_school"}}
</script>

School template (also stripped down):

<script type="text/x-handlebars" data-template-name="_school">
    {{#with controllers.calculatorReport}}
    <div {{bind-attr class=":schoolPartialWrapper displaySchoolPartial::hide-element"}}>
        ...
    </div>
    {{/with}}
</script>

This works as expected. Navigating between different Report views and School partials, as stated before, does not destroy the view.

The problem:

My problem comes when navigating to the Calculator view, the Report view is destroyed, which then destroys my School view. I do not want to also use queryParams to replace my Report views.

The reason I need to make sure the views aren't destroyed is because I have a select box with 3,000 schools in my School partial. It takes too long to re-render this. It would be a much better UX to simply show/hide the Report views.

Unknown Unknown · Accepted Answer · 2014-09-12T08:02:49

Don't fight with Ember. You will lose.

Views are instantiated and rendered when needed and torn down when done.

Why do you have a 3000-element dropdown, anyway?

If you really, really want to do this, what I would suggest is putting a {{render}} on your application page, and hide it. The view will be created and rendered when the app comes up and persist as long as the app is alive. Then, in the didInsertElement of your view, do a cloneNode of that hidden element and insert it into the view's DOM somewhere. You may have to muck around getting event handlers wired up correctly.

How to prevent views from being destroyed in Ember.js

2 Answers