Ember.js-正确操作（结构、包括、一般问题）

我正在玩ember.js，不知怎的，我被困在了如何以正确的方式构建结构上。我可以理解，但是把它们放在一起有一些问题

我正在使用require.js和handlebar

我的目录结构如下所示：

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

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

            }
        });
    }
);

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

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

My application.js如下所示：

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

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

            }
        });
    }
);

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

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

然后是我的应用程序控制器

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

应用程序视图：

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

最后是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>

编辑#2

我改变了路由器现在如下，但它没有做任何事情

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

亲切问候,，

---

Christopher

如果您使用最新版本的ember with v2 router，您可以执行以下操作：

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

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

            }
        });
    }
);

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

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

在catergoryList模板中，放置一个{{outlet}}（您可以选择将其命名）

然后，要插入到catergoryList中的模板的路径如下所示：

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

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

            }
        });
    }
);

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

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

---

在实践中可以找到一个很好的例子：

Shane，谢谢你的回答。我还添加了我的app_router.js，因为我还不能使你的方法适应我路由器的当前结构。我从一个示例应用程序复制了router.js。似乎我应该再次学习本教程的路由器部分，以正确理解您的答案。不用担心，如果我能进一步帮助澄清，请让我知道：）在更深入地研究路由器可能性的同时，我发现了一种在路由器中使用插座的方法。比如：connectOutlets:function（router）{router.get（'applicationController'）。connectOutlets（'mainNavigation'，'CategoryList'）}选择这个解决方案有什么缺点吗？嗨，克里斯托弗，我恐怕目标帖子已经在Ember router的学习曲线上移动了！哈哈，新路由器不是手动实例化的，“connectOutlets”功能被弃用，取而代之的是新的“renderTemplates”，它允许您指定要加载的模板、父模板和命名的出口。如果你能接受上述答案，让其他人知道它是正确的/相关的，我们可以分别讨论你发现的v2路由器的任何问题：）该死，我已经很高兴让它工作了：-）好吧，那么我必须继续理解你上面的方法。。