Ember.js - làm đúng (cấu trúc, bao gồm, câu hỏi chung)

Question

Tôi đang chơi xung quanh với ember.js và bị mắc kẹt bằng cách nào đó tìm ra cách xây dựng cấu trúc đúng cách. Tôi có thể theo dõi all examples, nhưng có một số vấn đề đặt tất cả chúng lại với nhau.

Tôi đang sử dụng require.js và tay lái.

cấu trúc thư mục của tôi trông như thế này:

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

application.js của tôi trông như thế này:

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

      } 
     }); 
    } 
); 

Sau đó điều khiển ứng dụng của tôi

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

Quan điểm ứng dụng:

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

Và, cuối cùng, mẫu 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> 

Những gì tôi đang cố gắng để làm bây giờ là bao gồm một mẫu vào mẫu ứng dụng chính (category_list). Tôi đoán tôi hoặc phải làm điều này trong chính khuôn mẫu HTML, hoặc trong khung nhìn ứng dụng - nhưng trong trường hợp sau, tôi không biết cách cấu hình/phân tích/liên kết nhiều hơn một khuôn mẫu.

Thực tiễn tốt nhất để xây dựng các mẫu riêng lẻ, độc lập, mô-đun và đặt tất cả chúng lại với nhau là gì? Điều này xảy ra ở đâu? Hoặc đây có phải là cách tiếp cận sai khi sử dụng ember.js không?

Có thể một trong các bạn có thể làm cho một số điều rõ ràng hơn với tôi. Cảm ơn.

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

Tôi đã thay đổi các bộ định tuyến hiện nay như sau, nhưng nó không làm gì cả.

liên quan

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, Christopher

Answer 1

nếu bạn sử dụng phiên bản mới nhất của ember với router v2, bạn có thể làm một cái gì đó như thế này:

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

Trong mẫu catergoryList của bạn, đặt dấu { {outlet}} (bạn có thể tùy ý đặt tên cho nó)

Sau đó, tuyến đường của bạn cho mẫu bạn muốn chèn vào catergoryList sẽ giống như sau:

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

Một ví dụ tốt về điều này trong thực tế có thể được tìm thấy ở đây: https://github.com/sh4n3d4v15/ember-todos