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

Question

我有一個應用程序，它將有一個分為三個部分的視圖層：

1. 側邊欄
2. 工具欄向左
3. 右工具欄

我已經花了幾個小時試圖找到對Google有用的東西，但是我沒有運氣。 我將需要一個簡短而完整的應用程序示例，說明如何使用帶有命名插座的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 -template。

您可以在此處了解更多信息。

Answer 2

在您的應用程序模板中，您需要將一個命名的插座聲明為{{outlet sidebar}} 。 同樣，您提到的工具欄。

編輯：其余的已過時。 正如@dineth所說，請參閱渲染模板 。

然后在您的路線中（假設您要粘貼到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}}幫手，而這個文件在.connectOutlet回調。

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

我有三種視圖（從解決方案的角度來看並不重要），它們被渲染到其出口。

希望這對其他人有幫助。