web-dev-qa-db-ja.com

Ember.js複数、名前付きコンセントの使用

私は、3つの部分に編成されたビューレイヤーを持つアプリケーションを持っています。

  1. サイドバー
  2. ツールバー左
  3. ツールバー右

グーグルに役立つものを見つけようとして数時間を費やしたかもしれませんが、運はありませんでした。 RouterとconnectOutletを使用して名前付きアウトレットを使用してこれを行う方法について、短い完全なアプリケーション例が必要です。

Thx先。

ember.jsoutlet
43
Eduárd Moldován

更新：Ember api changes。のため、このコードは古くなっています。

私は自分に最適な解決策を見つけたと言えるポイントに到達しました。

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

ソリューションの観点からは重要ではない3つのビューがあり、それらはアウトレットにレンダリングされます。

これが他の人に役立つことを願っています。

6
Eduárd Moldován

新しいルーターを使用すると、次のようなことができます。

{{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が必要です。

それについてもっと読むことができます こちら 。

57
Willem de Wit

アプリケーションテンプレートで、名前付きアウトレットを{{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コールバック.

11
dechov