Ember.js несколько, использование названной розетки

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

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

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

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

Ответ 1

UPDATE: этот код устарел, из-за изменений 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');
            }
        })
    })
});

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

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

Ответ 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 -template.

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

Ответ 3

В вашем шаблоне приложения вам нужно объявить именованную розетку как {{outlet sidebar}}. Аналогично для панелей инструментов, которые вы упомянули.

EDIT: остальное устарело. Как сказал @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.