Ember.js 多个，命名的插座用法

Posted 2023-02-19

【中文标题】Ember.js 多个，命名的插座用法

【英文标题】：Ember.js multiple, named outlet usage

【发布时间】：2012-08-22 10:49:50

【问题描述】：

我有一个应用程序，它有一个视图层，分为三个部分：

侧边栏 左侧工具栏 工具栏-右侧

我可能已经花了几个小时试图找到对谷歌有用的东西，但我没有运气。我需要一个简短而完整的应用程序示例，说明如何使用 Router 和 connectOutlet 以及命名的 outlet 来做到这一点。

谢谢。

【参考方案1】：

使用新路由器，您可以执行以下操作：

outlet "menu"
outlet

在您的路线中，您可以处理网点的内容：

// application route
Ember.Route.extend(
    renderTemplate: function() 
        // Render default outlet   
        this.render();
        // render extra outlets
        this.render("menu", 
            outlet: "menu",
            into: "application" // important when using at root level
        );
    
);

你应该有一个menu-模板。

您可以阅读更多关于它的信息here。

【讨论】：

我认为这是文档中最有用的部分：emberjs.com/api/classes/Ember.Route.html#method_render

【参考方案2】：

在您的应用程序模板中，您需要将命名出口声明为outlet sidebar。您提到的工具栏也是如此。

编辑：其余部分已过时。正如@dineth 所说，请参阅Rendering a Template。

然后在你的路线上（假设App.NavigationView 是你想要坚持的地方）：

App.Router = Em.Router.extend(    
    root: Em.Route.extend(
        index: Em.Route.extend(
            route: '/',
            connectOutlets: function(router) 
                router.get('applicationController').connectOutlet('sidebar', 'navigation');
            
        )
    )
);

侧边栏示例：http://jsfiddle.net/q3snW/7/

在outlet 助手上引用this documentation，在.connectOutlet 回调上引用this documentation。

【讨论】：

jsfiddle 示例有所帮助。我想我终于明白了。

顺便说一句，文档一点都不好，它缺少了一个需要理解的最重要的东西：上下文。

我相信这个解决方案现在在 Ember.JS 上已经过时了。参考文档：emberjs.com/guides/routing/rendering-a-template

【参考方案3】：

更新：由于 Ember api 更改，此代码已过时。

我已经达到了一个点，我可以说我找到了最适合自己的解决方案。

<script type="text/x-handlebars" data-template-name="application">
<div class="container">
    <div class="toolbar">outlet toolbar</div>
    <div class="main">outlet dashboard</div>
    <div class="sidebar">outlet sidebar</div>
</div>
</script>

使用这样的应用程序模板，我可以选择在哪里呈现视图。像这样：

App.router = Ember.Router.create(
    enableLogging: true,
    location: 'history',
    root: Ember.Route.extend(
        index: Ember.Route.extend(
            route: '/admin/',
            redirectsTo: 'login'
        ),
        login: Ember.Route.extend(
            route: '/admin/login/',
            doLogin: function(router, context) 
                "use strict";
                router.transitionTo('dashboard', context);
            ,
            connectOutlets: function (router, context) 
                "use strict";
                router.get('applicationController').connectOutlet('login', "login");
            
        ),
        dashboard: Ember.Route.extend(
            route: '/admin/dashboard/',
            doLogout: function(router, context) 
                "use strict";
                router.transitionTo('login', context);
            ,
            connectOutlets: function (router, context) 
                "use strict";
                router.get('applicationController').connectOutlet('sidebar', 'sidebar');
                router.get('applicationController').connectOutlet('toolbar', 'toolbar');
                router.get('applicationController').connectOutlet('dashboard', 'dashboard');
            
        )
    )
);

我有三个视图，从解决方案的角度来看并不重要，它们会被渲染到它们的出口。

希望这对其他人有所帮助。

【讨论】：

我应该提一下，这段代码不再适用于最新版本的 Ember。