Ember.js:将子资源的视图插入主应用程序的插座

Aks*_*wat 5 ember.js

默认情况下,Ember将子资源的视图插入{{outlet}}由父资源的视图定义的视图中.我该如何覆盖呢?即{{outlet}}在应用程序视图定义的子视图中插入子视图.为什么这是默认值?

用例:有一个users资源,new里面有一个路由.我想要new在应用程序{{outlet}}而不是父资源中显示{{outlet}}.

App.Router.map(function(){
  this.resource('users', function(){
     this.route('new');
  });
});
Run Code Online (Sandbox Code Playgroud)

Wil*_*ney 14

对于每条路线,我们都有一个renderTemplate可以重载的方法.这使我们可以完全控制视图的渲染.

例如,我们可以指定{{outlet}}视图将呈现的内容into:

(我认为这是你的用例,但我今天有点心不在焉.)

var UsersRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('users', {
            // Render the UsersView into the outlet found in application.hbs
            into: 'application'
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

我们还可以指定要使用该outlet属性渲染的插座名称:

var UsersRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('users', {
            // Render the UsersView into the outlet named "sidebar"
            outlet: 'sidebar'
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

当然,我们可以使用两者的组合来指定插座的名称,以及使用该into属性找到该插座的位置.

  • 我遇到了一个奇怪的问题,当将子模板渲染到'application'时,父导航在导航时会消失.可测试:http://jsfiddle.net/genkilabs/spAbn/3/ (3认同)