Ember.js plusieurs, nommé exutoire d'utilisation

Question

J'ai une application qui aura une couche de la vue organisée en trois parties:

1. Barre latérale
2. Barre d'outils de gauche
3. Barre d'outils à droite

J'ai passé peut durer de quelques heures à essayer de trouver quelque chose d'utile avec google, mais je n'avais pas de chance. J'aurais besoin d'une courte et complète de l'application exemple sur la façon de faire cela en utilisant le Routeur et connectOutlet, nommés points de vente.

Thx d'avance.

Answer 1

Avec le nouveau Routeur, vous pouvez faire quelque chose comme ceci:

{{outlet "menu"}}
{{outlet}}

Dans votre ApplicationRoute vous pouvez gérer le contenu des points de vente:

app.ApplicationRoute = 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
        });
    }
});

Vous devriez avoir un menu-modèle si.

Answer 2

Dans votre modèle, vous aurez besoin de déclarer un nom de sortie {{outlet sidebar}}. De même pour les barres d'outils que vous avez mentionné.

EDIT: Le reste est hors de date. Comme @dineth dit, voir le Rendu d'un Modèle.

Ensuite, dans votre parcours (disons App.NavigationView est ce que vous voulez à s'en tenir là):

App.Router = Em.Router.extend({    
    root: Em.Route.extend({
        index: Em.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('sidebar', 'navigation');
            }
        })
    })
});

Encadré par exemple: http://jsfiddle.net/q3snW/7/

Référence de cette documentation sur l' {{outlet}} d'aides et de cette documentation sur l' .connectOutlet de rappel.

Answer 3

Mise à JOUR: Ce code est obsolète, en raison de la Braise changements de l'api.

J'ai atteint un point où je peux dire que j'ai trouvé la solution qui est la meilleure pour moi.

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

L'utilisation d'un tel modèle d'application, je peux choisir l'endroit où le rendu des vues. Comme ceci:

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

J'ai les trois points de vue, qui ne sont pas importants à partir de la solution de point de vue, ceux qui sont rendus à leurs points de vente.

Espérons que cela aide les autres.