Question

I’d like to create “search” page with two routes:

/ index – the default route
/:time/:filter search – route after user enters some parameters, segment filter is manually serialized/deserialized

Currently I’m transitioning between these routes using transitionTo, however I’d like to stop doing that as it does re-render(re-insert?) the whole application.

What I’d like to do: change url (either form / to /:time/:filter or just to update :time and :filter segments), but preserve current state of application.

Is something like that possible?

Ember.js version: 1.0.0-PRE.2
JsFiddle: http://jsfiddle.net/hKzG9/2/

Answer 1

The technique you’re looking for is nesting outlets. A template can have any number of outlets and templates inserted into an outlet can also their own outlets. In your example, you’re always connecting the application templates outlet when entering a new state. This is what causes the entire application to redraw.

In effect, what you want is your HomeView’s template to also have an outlet. You’ll fill the outlet in the application’s template with an instance of HomeView, which now has its own outlet. When you perform a search (and enter into the search state) you’ll connect the outlet inside HomeView’s template with another view for showing the results.

I’ve updated your fiddle to reflect this: http://jsfiddle.net/hKzG9/3/

Your data-template-name="app-page-home" now has an {{outlet}} section and I’ve added a data-template-name="app-results" along with a matching view and controller.

In the search state you’ll see I’m now calling router.get('homeController').connectOutlet('results') instead of router.get('applicationController').connectOutlet('home') a second time.

This will keep the already visible search controls from redrawing and will insert a new area for the search results.