Question

更新：1月6日

目标：

我有一个主视图，我将其用作脚手架。我打算在主视图的不同部分插入子视图。主视图是动态的，当用户选择不同的路径时，可以用另一个视图替换。

方法＃1：

我为主视图定义了一个插座，并在主视图中为每个子视图命名了插座。 Outlet适用于顶级模板（主视图），但是，嵌套的子插座不会被渲染。 API是否支持嵌套出口？

方法＃2：在子模板中，我尝试{{#with}}来定义范围，以便选择右控制器并使用正确的数据呈现子视图。但是，{{＃with}}似乎没有按预期工作。

我本来想放jsfiddle，但他们有一个旧版本的Ember.js

########ROUTER Config ########

    App.Router.map(function (match) {
        match('').to('index');
        match('/').to('index');
        match('/models').to('models');
        match('/list').to('list');
    });

    App.IndexRoute = Ember.Route.extend({
        redirect : function () {
            this.transitionTo('models');
        }
    });

    App.ModelsRoute = Ember.Route.extend({
        renderTemplates : function () {
            var navigationController = this.controllerFor('navigation'),
                fuseColController = this.controllerFor('fuseCol');
            this.render('navigation-view', {
                outlet : 'navigationContent',
                controller : navigationController
            });
            this.render({ outlet : 'mainContent' });
   /* this does not work , is it due to nested outlets not being supported? 
    Are there any events fired when render on mainContent is complete so that child views may be rendered?
this.render('col-view', {outlet : 'fuseColContainer', controller: fuseController}); */
            console.log("On Models Route Render");
        },
        connectOutlets : function (router, context) {
            console.log("On Models connnectOutlets");//Is Never called 
        },
        connectOutlet : function (router, context) {
            console.log("On Models connnectOutlet"); //Is Never called 
        },
        setupControllers : function (controller) {
            console.log("Models setupControllers called");
//            this.controllerFor('fuseCol').connectOutlet('fuseColContainer', 'fuseCol');
//deprecated in the new API ?? connecteOutlet throws up error !!! 
        }

    });


############################# Templates #######################

<script type="text/x-handlebars">
    <div class="container-fluid">
        {{outlet navigationContent}}//This  WORKS !!!

        {{outlet mainContent}}// This WORKS !!!
    </div>
</script>


<script type="text/x-handlebars" id="models-view">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
                    Nested Child 1 
                    {{outlet fuseColContainer}}  //Does Not Work  
            </div>
            <div class="span10">
                <div class="row-fluid">
                    <div class="row-fluid">
                        <div class="span10">Nested Child 2</div>
                        <div class="span2">Nested Child 3</div>
                    </div>
                    <div class="row-fluid">Nest Child 4</div>
                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="fuse-col-view" id="fuse-col-view">
    <select multiple="true" id="fuseColList">
        {{#each item in  controller}}
        <option>{{item.name}}</option>
        {{/each}}
    </select>
</script>
################### Controller #################

  App.Router = Ember.Router.extend();

    App.Router.map(function (match) {
        match('').to('index');
        match('/').to('index');
        match('/models').to('models');
        match('/list').to('list');
    });

    App.IndexRoute = Ember.Route.extend({
        redirect : function () {
            this.transitionTo('models');
        }
    });

    App.ModelsRoute = Ember.Route.extend({
        renderTemplates : function () {
            var navigationController = this.controllerFor('navigation'),
                fuseColController = this.controllerFor('fuseCol');
            this.render('navigation-view', {
                outlet : 'navigationContent',
                controller : navigationController
            });
            this.render({ outlet : 'mainContent' });
            /* This does not work , i think there should be a better approach
            this.render('fuse-col-view', {outlet : 'fuseColContainer', controller : fuseColController});*/
            console.log("Models render called");
        },
        connectOutlets : function (router, context) {
            console.log("Models connnectOutlets called");
        },
        connectOutlet : function (router, context) {
            console.log("Models connnectOutlet called");
        },
        setupControllers : function (controller, playlist) {
            console.log("Models setupControllers called");
    /*there is no connectOutlet method on controller in API ??*/
//            this.controllerFor('fuseCol').connectOutlet('fuseColcontainer', 'fuseCol');
        }

    });



    App.FuseColController = Ember.ArrayController.extend({
        content : [],
        init : function () {
            this.pushObject(App.FuseColItem.create({name : 'Col 1'}));
            this.pushObject(App.FuseColItem.create({name : 'Col 2'}));
            this.pushObject(App.FuseColItem.create({name : 'Col 3'}));
        }
    });

    App.FuseColItem = Ember.Object.extend({
        name : 'Sample Col'
    });

    App.FuseColView = Ember.View.extend({
        templateName : 'fuse-col-view'
    });

Ember.js版本：建于1月3日

我已经省略了其他代码以保持简洁。请添加评论以获取更多信息。

Answer 1

你设置了路由器吗？如果是这样，这将自动创建相应的命名空间视图，路由器名称的控制器。正如您所做的那样，如果您需要ArrayController，您可以手动实例化它。

如果您设置如下路由器：

App.Router.map(function (match) {
    match("/").to("col");
});

App.colRoute = Ember.Route.extend({
    renderTemplate: function(){
        this.render('col-view')
    }
})

然后Ember将通过路由器名称链接colView，colController（您定义的arrayController）和'col-view'模板。

我认为你不需要使用“#with”，我想我已经在某处读到这是不好的做法...我认为;）

Ember.js嵌套出口

更新：1月6日

1 个答案: