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

06odsfpq  于 2022-11-05  发布在  其他
关注(0)|答案(3)|浏览(171)

我有一个应用程序,它将有一个视图层组织为三个部分:
1.侧边栏
1.工具栏-左
1.工具栏-右
我已经花了五月过去几个小时试图找到一些有用的谷歌,但我没有运气。我需要一个简短而完整的应用程序示例,就如何做到这一点使用路由器和connectOutlet,与命名的outlet。
谢谢。

dced5bon

dced5bon1#

使用新的路由器,您可以执行以下操作:

{{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

t40tm48m

t40tm48m2#

在应用程序模板中,您需要将一个命名的outlet声明为{{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}}帮助器的此文档,以及有关.connectOutlet回调的此文档。

8i9zcol2

8i9zcol23#

更新:由于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');
            }
        })
    })
});

我有三种观点,从解决方案的Angular 来看,它们并不重要,它们被呈现给它们的出口。
希望这对其他人有帮助。

相关问题