Ember.js - facendo tutto bene (struttura, include, domande generali)

Question

Sto giocando con ember.js e sono bloccato in qualche modo a scoprire come costruire la struttura nel modo giusto. Potrei seguire all examples, ma ho qualche problema a metterli tutti insieme.

Sto usando require.js e manubri.

mia struttura di directory simile a questo:

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

miei application.js aspetto:

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() { 

      } 
     }); 
    } 
); 

Poi il mio controller applicazione

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

visualizzazione applicazione:

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"); 
      } 
     }); 
    } 
); 

E, infine, il modello application.html

<div id="container"> 

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

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

    <div id="content"> 

    </div> 

    <div id="footer"> 

    </div> 

</div> 

Quello che sto cercando di fare ora è quello di includere un altro modello nel modello di applicazione principale (category_list). Immagino di doverlo fare nel modello HTML stesso o nella vista dell'applicazione, ma nel caso di quest'ultimo non so come configurare/analizzare/associare più di un modello.

Qual è la migliore pratica per la creazione di modelli individuali, indipendenti e modulari e per metterli tutti insieme? Dove esattamente dovrebbe succedere questo? Oppure si tratta di un approccio errato all'utilizzo di ember.js?

Forse uno di voi potrebbe rendere alcune cose più chiare per me. Grazie.

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

ho cambiato il router ora come seguire, ma non fa nulla.

saluti

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' 
        }); 
       } 
      // .... 
     }); 
    } 
); 

saluti, Christopher

Answer 1

se si utilizza l'ultima versione di brace con router v2, si può fare qualcosa di simile:

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

Nel modello catergoryList, porre { {outlet}} (puoi facoltativamente chiamarlo)

Quindi, il percorso per il modello che desideri inserire in catergoryList sarà il seguente:

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

Un buon esempio di questo, in pratica, può essere trovato qui: https://github.com/sh4n3d4v15/ember-todos