Question

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

补充工具栏
工具栏左
工具栏 - 右

我花了几个小时试图找到一些有用的谷歌，但我没有运气。我需要一个简短而完整的应用程序示例，介绍如何使用Router和connectOutlet以及命名出口。

提前。

Answer 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。

Answer 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。~~

Answer 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.js多个，名为出口用法

3 个答案: