Geek asks and answers

Ember.js Rendering outlet as a modal window

I am trying to make modal. To do this, I created a custom outlet using {{outlet modalOutlet}}My application template has two outputs, the default output and modalOutlet. However, when the modal template is displayed in {{outlet modalOutlet}}, my default {{outlet}}becomes empty.

How can I change it so that the default value {{outlet}} does not change, so I can actually display it {{outlet modalOutlet}}as a modal window or as a sidebar as part of the layout

I'm not sure if this is due to my code, or to something like a method renderTemplate()that I am missing. jsFiddle with my code here .

// Router
App.Router.map(function(){
    this.route('contributors');
    this.route('contributor', {path: '/contributors/:contributor_id'});
});


App.ContributorsRoute = Ember.Route.extend({
    model: function() {
        return App.Contributor.all();
    },
});

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

<script type="text/x-handlebars" data-template-name="application">  
    <nav>
        {{#linkTo "index"}}Home{{/linkTo}}
        {{#linkTo "contributors"}}Contributors{{/linkTo}}
    </nav>
    <div style='padding:5px;margin:5px;border:1px dotted red;'>
        Default Outlet
        {{outlet}}
    </div>
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>    
        modalOutlet
        {{outlet modalOutlet}}
    </div>
</script>
+5
source share
2 answers

contributors, .

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributors');
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

, , :

App.Router.map(function(){
    this.resource('contributors', function() {
        this.route('show', {path: ':contributor_id'});
    });
});

... . , modalOutlet into ( : 'application')

+4

, , , , .

,

→

, ,

→

Contributor .

, :

→ →

Contributors, .

JSFiddle

//Router
App.Router.map(function(){
    this.resource('contributors', function() {
        this.resource('contributor', {path: '/:contributor_id'});
    });   
});

//Route
App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            into: 'application',
            outlet: 'modalOutlet'
        });
    }
});
+3

More articles:


All Articles