Transitioning Deeply Nested Dynamic Routes

by amindunited

HTML

<!-- SCRIPTS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
    
<script type="text/x-handlebars" data-template-name="application">
    <h1>App</h1>
    <button {{action 'buttonClick'}}>use transition</button>
    {{#link-to 'subCategory' '2' '3'}}Category{{/link-to}}
    {{outlet}}
    </script>
<script type="text/x-handlebars" data-template-name="category">
    <h2>Category</h2>
    <div>{{content.id}}</div>
    {{outlet}}
    </script>    
<script type="text/x-handlebars" data-template-name="subCategory">
<h3>Sub Category</h3>
    <div>{{content.id}}</div>
    </script>
<script type="text/x-handlebars" data-template-name="group">
<h4>Group</h4>
    </script>

JavaScript

var data = {categories:[{
    id: "cat_id_1",
    subcategories: [{
            id: "subCat_id_2",
            groups: [
                {
                    id: "group_id_3"
                }
            ]
        }
    ]
}]}
window.App = App = Em.Application.create({
    LOG_TRANSITIONS: true,
    LOG_VIEW_LOOKUPS: true,
    LOG_ACTIVE_GENERATION: true,
    LOG_BINDINGS: true
});

App.Router.map(function(){
    this.resource("category", {path : '/category/:cat_id'}, function(){
       this.resource("subCategory", {path:'/subCategory/:subCat_id'}, function(){
            this.resource("group", {path:'/group/:group_id'}, function(){
                
            });
        });
    });
});
App.CategoryRoute = Em.Route.extend({
    model: function(params){
        console.log("category model ", params);
        return {id:params.cat_id}
    },
    serialize: function(model){
        console.log("category serialise ", model);
    }
});
App.SubCategoryRoute = Em.Route.extend({
    model: function(params){
        console.log("sub category model ", params);
        return {id:params.subCat_id}
    },
    serialize: function(model){
        console.log("sub category serialise ", model);
    }
})
App.GroupRoute = Em.Route.extend()
App.ApplicationController = Em.Controller.extend({
    actions: {
        buttonClick: function(){
            //var url = 'category.'+2+'.sub_category'
            this.transitionTo('subCategory', '66', '9');
        }
    }

});
App.ApplicationView = Em.View.extend({});