以“Ember”方式渲染侧边栏答案

【问题标题】：Render a sidebar the "Ember" way以“Ember”方式渲染侧边栏
【发布时间】：2013-12-25 10:02:17
【问题描述】：

使用 Ember.js v1.2.0，我正在尝试将侧边栏模板呈现到命名插座中。根据当前路线，模板可能会有所不同。我正在努力想出“Ember”的方式来做到这一点。

这是我目前所掌握的要点：

app/templates/application.hbs

{{outlet sidebar}}

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

app/routes/docs.js

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

这并不真正起作用，而且感觉不是很Ember-ish。帮忙？

【问题讨论】：

标签： javascript ember.js

【解决方案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'
    });
 }
});

【讨论】：

谢谢！当然，我可以这样做。我只是在想一定有比为每条路线定义一个renderTemplate() 更好的方法。
您可以定义抽象路由器类，它会根据路由器类名称自动执行此操作。我用这个解决方案更新了我的答案。

【解决方案2】：

我最近写了一篇题为Model-based sidebars in Ember 的博文。更好的方法是使用嵌套路由，其中父路由呈现侧边栏：

import Ember from 'ember';  
import config from './config/environment';

var Router = Ember.Router.extend({  
  location: config.locationType
});

Router.map(function() {  
  this.route('authors', {path: '/authors'}, function() {
      this.route('books', {path: '/:account_id/books'});
  });
});

export default Router;

这比使用命名插座要简洁得多，并且不需要弄乱路由的 renderTemplate 函数。此外，当您需要在侧边栏中显示模型数据时，接受的答案会变得非常复杂，因为每条路线都需要多个模型。

博文包含更多详细信息和 GitHub 上示例的链接。

【讨论】：