web-dev-qa-db-fra.com

Ember.js multiples, utilisation de sortie nommée

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

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

J'ai passé plusieurs heures à essayer de trouver quelque chose d'utile avec google, mais je n'ai pas eu de chance. J'aurais besoin d'un exemple d'application court et complet sur la façon de procéder à l'aide de Router et connectOutlet, avec des prises nommées.

Merci d'avance.

ember.jsoutlet
43
Eduárd Moldován

MISE À JOUR: Ce code est obsolète, en raison des changements de l'API Ember.

J'ai atteint un point où je peux dire que j'ai trouvé la solution qui me convient le mieux.

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

En utilisant un tel modèle d'application, je peux choisir où rendre les vues. Comme ça:

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 du point de vue de la solution, ceux qui sont rendus à leurs points de vente.

J'espère que cela aide les autres.

6
Eduárd Moldován

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

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

Dans votre itinéraire, vous pouvez gérer le contenu des points de vente:

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

Vous devriez cependant avoir un modèle menu-.

Vous pouvez en savoir plus ici .

57
Willem de Wit

Dans votre modèle d'application, vous devrez déclarer une sortie nommée comme {{outlet sidebar}}. De même pour les barres d'outils que vous avez mentionnées.

EDIT: Le reste est obsolète. Comme l'a dit @dineth, voir Rendu d'un modèle .

Puis dans votre itinéraire (disons App.NavigationView est ce que vous voulez y coller):

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

Exemple de barre latérale: http://jsfiddle.net/q3snW/7/

Référence cette documentation sur le {{outlet}} helper, et cette documentation sur le .connectOutlet rappeler.

11
dechov