New child route not displaying its new template

1

I have a single route in my app right now and am trying to create a new one as a child of that.

Existing code which works:

app.js

app.Router.map(function(){
   this.resource('home', {path:''},function(){
     this.route('search', {path:'/home/search'})
   })
})

File structure

-app
  -route
    - home-route.js
    - home-search-route.js

    -controller
      - home-controller.js
      - home-search-controller.js

  -template
    -home

       - search.ehbs
    - application.ehbs
    - home.ehbs

The above works fine and i can access my url at http://localhost/home/search. The application.ehbs and home.ehbs, both of them have {{outlet}} in them. Now when i define a new route, which i want as a child of search, this thing doesn’t seem to work. New code and file structure below:

app.js - with new route

app.Router.map(function(){
   this.resource('home', {path:''},function(){
     this.route('search', {path:'/home/search'}, function(){
        this.route('result', {path:'/result'})
     })
   })
})

file structure - with new template

-app
  -route
    - home-route.js
    - home-search-route.js

    - home-search-result-route.js

    -controller
      - home-controller.js
      - home-search-controller.js

  -template
    -home

       - search.ehbs
       - search
          - result.ehbs 
    - application.ehbs
    - home.ehbs

I move to this new route (result.ehbs) on a button click, which is defined in a action in “home-search-controller.js” as

this.transitionToRoute('home.search.result')

So, when i click the button, the url changes to http://localhost/home/search/result and i see the new route “home-search-result-route.js” is also hit (consoling values from there), but it doesnt shows the result.ehbs, it just stays on search.ehbs. Any idea, what could be going wrong. I read several posts, and matched the structure and it seems right to me. And i also checked with Ember inspector, the file names it shows there matches with what i have defined.

Created twiddle - Ember Twiddle

So, in this twiddle if i look for page (in output text field) - /rails/search/ , i get the template, but when i look for /rails/search/result , i dont get the result template

2

You’re missing an {{outlet}} line in your rails.search file. The outlet is where the nested route will be displayed which is why result isn’t showing up

3

Yeah, i tried that. But the problem is that, when i write {{outlet}} at the end of content in search template and move to result template, it shows both, first the contents of search and then the result. I just want to show for result template only. How can i do that?

4

I’d suggest moving most of your search template to search/index. Another option would be to move result out of its nesting inside of search, but you may run into issues with passing the result info as desired. Afraid I’m signing off for the evening, but might also be worth asking on the Slack channel if you want to get real-time feedback …

5

Hey, I finally decided to move the search contents to search/index. But would i just need a search/index template or would need to define a route, controller for this search index as well. And if yes, then how would i access the model as its already in search controller?