Ember.js plusieurs, nommé exutoire d'utilisation

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

  1. Barre latérale
  2. De la barre d'outils à gauche
  3. De la 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.

InformationsquelleAutor Eduárd Moldován | 2012-08-27
  1. 57

    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 avoir une menu-modèle si.

    Vous pouvez en lire plus à ce sujet ici.

    InformationsquelleAutor Willem de Wit
  2. 11

    Dans votre modèle d'application, 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.

    Puis dans votre itinéraire (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');
            }
        })
    })
});

    Barre latérale exemple: http://jsfiddle.net/q3snW/7/

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

    • Le jsfiddle exemple aidé. Je pense que j'ai finalement obtenu le point.
    • Btw, la documentation n'est pas bon du tout, il manque la chose la plus importante que l'on doit comprendre, c': le contexte.
    • Je crois que cette solution est aujourd'hui dépassée sur Ember.JS. Reportez-vous à la documentation: emberjs.com/guides/routing/rendering-a-template
    InformationsquelleAutor dechov
  3. 6

    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ère que cela aide les autres.

    • Je tiens à préciser que ce code ne fonctionne plus avec la dernière version de Braise.
    • Je serait bien de savoir pourquoi la réponse obtenu downvoted.
    InformationsquelleAutor Eduárd Moldován