Ember - creating new child route not displaying its new template

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 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.