Ember.js - doing it right (structure, includes, general questions)

Question

I'm playing around with ember.js and am stuck somehow finding out how to build up the structure the right way. I could follow all examples, but have some problems putting them all together.

I'm using require.js and handlebars.

My directory structure looks like this:

- app
- - controllers
- - css
- - helpers
- - lib
- - models
- - routes
- - templates
- - - partials
- - views

My application.js looks like this:

require.config({
    paths:{
        jquery:'lib/jquery-1.7.2',
        handlebars:'lib/handlebars',
        ember:'lib/ember',
        ember_data:'lib/ember-data',
        text:'lib/requireJS/text',
        md5:'lib/md5',
        spin:'lib/spin'
    },

    shim:{
        'ember':{
            deps:[ 'jquery', 'handlebars'],
            exports:'Ember'
        },
        'ember_data':{
            deps:[ 'ember'],
            exports:'DS'
        }
    },

    waitSeconds:15        
});

define('application'
        ,[
            // Routes
            'routes/app_router'

            // Controller
            ,'controllers/application_controller'

            // Views
            ,'views/application_view'
            ,'views/category/category_list_view'

            // Libraries
            ,'jquery'
            ,'handlebars'
            ,'ember'
            ,'ember_data'
            ,'spin'

        ]
        , function (

             // Router
             Router

             // Controller
            ,ApplicationController

             // Views
            ,ApplicationView
            ,CategoryListView

             // Models
            ,Category
            ,Product
        )
    {
        return  Ember.Application.create({

             VERSION: '1.0.0'

            ,rootElement:'#main'

            // Load Router
            ,Router:Router

            // Load Controllers
            ,ApplicationController:ApplicationController

            // Load associated Views
            ,ApplicationView:ApplicationView
            ,CategoryListView:CategoryListView

            // Load Models
            ,Category:Category
            ,Product:Product

            //Persistence Layer,using default RESTAdapter in ember-data.js.
            ,store:DS.Store.create({
                revision:10
                ,adapter:DS.RESTAdapter.create({
                     bulkCommit:false
                    ,serializer:DS.Serializer.create({
                        primaryKey:function (type) {
                            return type.pk;
                        }
                    })
                    ,mappings:{
                        //categories:Category
                    }
                    ,namespace:'api'
                    ,url: "https://example.org"
                })
            })

            ,ready:function () {

            }
        });
    }
);

Then my application controller

define(
    'controllers/application_controller'
    ,['ember' ],
    function () {
        return Ember.Controller.extend({
            init: function() {
            }
        });
    }
);

The application view:

define('views/application_view', [
        'text!templates/application.html',
        'ember'
    ],
    function(Application_markup) {
        return Ember.View.extend({
            template: Ember.Handlebars.compile( Application_markup ),
            elementId: 'container',
            didInsertElement: function() {
                this.$().hide().show("slow");
            }
        });
    }
);

And, finally, the application.html template

<div id="container">

    <div id="header">
        FOO BAR
    </div>

    <div id="navigation">
        {{outlet mainNavigation}}
    </div>

    <div id="content">

    </div>

    <div id="footer">

    </div>

</div>

What I am trying to do now is to include another template into the main application template (category_list). I guess I either have to do this in the HTML template itself, or in the application view - but in case of the latter one I don't know how to configure/parse/bind more than one template.

What is the best practice of building individual, independent, modular templates and to put them all together? Where exactly should this happen? Or is this even a wrong approach of using ember.js?

Maybe one of you could make some things more clear to me. Thanks.

EDIT #1

app_router.js

define('routes/app_router',
    ['ember' ],
    function () {
        return  Em.Router.extend({
            enableLogging:true, //useful for development
            /*  location property:  'hash': Uses URL fragment identifiers (like #/blog/1) for routing.
             'history': Uses the browser's history.pushstate API for routing. Only works in modern browsers with pushstate support.
             'none': Does not read or set the browser URL, but still allows for routing to happen. Useful for testing.*/
            location:'hash',
            /*   location: 'history',
             rootURL:'/app',*/
            root:Ember.Route.extend({
                index:Ember.Route.extend({
                    route:'/'

                    /*,connectOutlets:function (router) {
                        //Render application View ,sign in.
                        v = router.get('applicationController').get('view');
                        if (v) v.remove();
                        App.router.get('applicationController').set('loggedin', false);

                        router.get('applicationController').connectOutlet({name:'login', outletName:'loginform'});
                        router.get('loginController').enterLogin();

                    }*/
                })
                /*,contacts:Em.Route.extend({
                    route:'/contacts',

                    showContact:function (router, event) {
                        router.transitionTo('contacts.contact.index', event.context);
                    },

                    showNewContact:function (router) {
                        router.transitionTo('contacts.newContact', {});
                    },
                    logout:function (router) {

                        jQuery.ajax({
                            url:'/site/logout',
                            type:'POST',
                            success:function (response) {
                                if (!response.authenticated) {
                                    router.get('applicationController').set('loggedin', false).get('view').remove();
                                    router.transitionTo('root.index', {});
                                }
                            }
                        })
                    },


                    index:Em.Route.extend({
                        route:'/',
                        connectOutlets:function (router) {
                            if (router.get('applicationController').get('loggedin'))
                                router.get('applicationController').connectOutlet('contacts', App.store.findAll(App.Contact));
                            else   router.transitionTo('root.index');
                        }
                    }),

                    contact:Em.Route.extend({
                        route:'/contact',
                        index:Em.Route.extend({
                            route:'/:contact_id',
                            deserialize:function (router, urlParams) {
                                return App.store.find(App.Contact, urlParams.contact_id);
                                debugger;
                            },

                            showEdit:function (router) {
                                router.transitionTo('contacts.contact.edit');
                            },

                            connectOutlets:function (router, context) {
                                if (router.get('applicationController').get('loggedin'))
                                    router.get('contactsController').connectOutlet('contact', context);
                                else   router.transitionTo('root.index');
                            }
                        }),

                        edit:Em.Route.extend({
                            route:'edit',

                            cancelEdit:function (router) {
                                router.transitionTo('contacts.contact.index');
                            },

                            connectOutlets:function (router) {
                                if (router.get('applicationController').get('loggedin')) {
                                    var contactsController = router.get('contactsController');
                                    contactsController.connectOutlet('editContact', router.get('contactController').get('content'));
                                    router.get('editContactController').enterEditing();
                                } else     router.transitionTo('root.index');
                            },

                            exit:function (router) {
                                router.get('editContactController').exitEditing();
                            }
                        })
                    }),
                    newContact:Em.Route.extend({
                        route:'/contacts/new',

                        cancelEdit:function (router) {
                            router.transitionTo('contacts.index');
                        },

                        connectOutlets:function (router) {
                            if (router.get('applicationController').get('loggedin')) {
                                router.get('contactsController').connectOutlet('editContact', {});
                                router.get('editContactController').enterEditing();
                            } else     router.transitionTo('root.index');
                        },

                        exit:function (router) {
                            router.get('editContactController').exitEditing();
                        }
                    })
                })*/
            })
        });
    }
);

EDIT #2

I changed the router now as follow, but it does not do anything.

define('routes/apps_router', ['ember'],
    function () {
        return Em.Router.extend({
            enableLogging:true
            ,location:'hash'

         ,map: function (match) {
            match("/").to("CategoryList", function (match) {
                match("/").to("mainNavigation");
            });
        }

        ,root:Ember.Route.extend({
            index:Ember.Route.extend({
                route:'/'

                ,renderTemplates: function() {
                    this.render('mainNavigation', {
                        into: 'CategoryList'
                    });
                }
           // ....
        });
    }
);

Kind regards, Christopher

Answer 1

if you use the latest release of ember with v2 router, you can do something like this:

App.Router.map(function (match) {
    match("/").to("categoryList", function (match) {
        match("/").to("foo");
    });
});

In your catergoryList template, put an {{outlet}} (you can optionally name it)

Then, your route for the template you want to insert into catergoryList will be like this:

App.fooRouter = Ember.Router.extend({
renderTemplates:function () {
        this.render('foo', {
            into:'catergoryList'
        });
    }
})

A good example of this in practice can be found here: https://github.com/sh4n3d4v15/ember-todos