使用"Ember"方式呈现侧边栏

Question

使用Ember.js v1.2.0,我正在尝试将侧边栏模板渲染到命名插座中.模板可能根据当前路线而不同.我正在努力想出"Ember"这样做的方法.

这是我到目前为止的要点:

应用程序/模板/ application.hbs

{{outlet sidebar}}

应用程序/路线/的application.js

var ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    var sidebar = controller.get('sidebar') || 'application';
    this._super();
    this.render('sidebar/' + sidebar, {
      into: 'application',
      outlet: 'sidebar'
    });
  }
});

应用程序/路由/ docs.js

var DocsRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.controllerFor('application').set('sidebar', 'docs');
    this.render();
  }
});

这不是真的有效,而且感觉不太Ember-ish.救命？

Answer 1

如果我正确地取消了问题,那么侧栏总是由主路线定义.然后你可以在每个路线的renderTemplate中设置侧边栏:

var ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render();
    this.render('sidebar/application', {
      into: 'application',
      outlet: 'sidebar'
    });
 }
});

var DocsRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render();
    this.render('sidebar/docs', {
      into: 'application',
      outlet: 'sidebar'
    });
 }
});

var AnotherRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render();
    this.render('sidebar/another', {
      into: 'application',
      outlet: 'sidebar'
    });
 }
});

如果您有很多这些路由,并且每次都不想手动编写renderTemplate,那么您可以定义自动执行此操作的抽象路由类,并在需要侧栏的每个路径中扩展该类.

var RouteWithSidebar = Ember.Route.extend({
  routeName : function() {
    var routeName = this.constructor.toString();
    // Remove 'Route'
    routeName = routeName.replace('Route', '');
    // Make first letter lowercase
    routeName = routeName.charAt(0).toLowerCase() + routeName.substr(1);
    return routeName;
  },
  renderTemplate: function(controller, model) {
    this.render();
    this.render('sidebar/' + this.routeName(), {
      into: 'application',
      outlet: 'sidebar'
    });
 }
});