Ember.js несколько именованных розеток

Question

У меня есть приложение, которое будет иметь слой представления, состоящий из трех частей:

1. Боковая панель
2. Панель инструментов налево
3. Панель инструментов правой

Я потратил несколько часов, пытаясь найти что-то полезное с Google, но мне не повезло. Мне нужен короткий и полный пример приложения о том, как сделать это с помощью Router и connectOutlet с именованными выходами.

Спасибо вперед

Answer 1

ОБНОВЛЕНИЕ: Этот код устарел, из-за изменений в 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');
            }
        })
    })
});

У меня есть три точки зрения, которые не важны с точки зрения решения, которые представляются в свои магазины.

Надеюсь, что это помогает другим.

Answer 2

С новым маршрутизатором вы можете сделать что-то вроде этого:

{{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-тембли хотя

Вы можете прочитать больше об этом здесь.

Answer 3

В шаблоне приложения вам нужно объявить именованный выход как {{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 Перезвоните.