Ember 路线 + 网点答案

【问题标题】：Ember routes + outletsEmber 路线 + 网点
【发布时间】：2014-03-04 17:40:15
【问题描述】：

在潜入 Backbone + Marionette 很长一段时间后，我已经与 Ember 一起训练了一周左右。我已经能够使用它并轻松地建立一个博客。只要应用程序依赖于路线就可以了。现在我想构建一个只有 2 条路线的应用程序，并且更多地依赖于状态。我想定义以下嵌套的 HTML 结构：

<div id="topbar"></div>
<div id="content"></div>
<div id="botbar"></div>

无论内容是什么，我都希望顶部栏和底部栏保持不变。内容可以是“pos content”

<div id="pos">
    <div id="leftsidebar">...</div>
    <div id="cart">...</div>
    <div id="buttons">...</div>
    <div id="rightsidebar">...</div>
    <div id="header">...</div>
</div>

或“参数内容”

<div id="params">...</div>

到目前为止，我已经设法使用以下代码构建了第一级嵌套：

App = Em.Application.create({});

App.Router.map(function() {
    this.route('index', { path: '/' });
    this.route('params', { path: '/params' });
});

App.IndexRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render('topbar', { outlet: 'topbar' });
        this.render('pos', { outlet: 'content' });
        this.render('botbar', { outlet: 'botbar' });
    }       
});     

App.ParamsRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render('topbar', { outlet: 'topbar' });
        this.render('params', { outlet: 'content' });
        this.render('botbar', { outlet: 'botbar' });
    }
});

我在 chrome Ember 扩展中看到定义了路由，并且我的控制器（TopbarController、BotbarController 和 PosController/ParamsController 取决于路由）似乎已实例化。

现在我想要更深入，每个子插座（左侧栏、购物车等）都有一个控制器，但我不知道如何构建第二层嵌套。

文档似乎对我没有帮助，而且谷歌在这方面不是我的朋友:(你们能帮我吗？谢谢。

【问题讨论】：

标签： ember.js routing states

【解决方案1】：

ember 中的 outlet 与当前活动路线相关。

如果你有以下应用模板

<div id="topbar">
  {{ outlet 'topbar' }}
</div>
<div id="content">
  {{ outlet }}
</div>
<div id="botbar">
  {{ outlet 'botbar' }}
</div>

您可以通过将重复代码移到 ApplicationRoute 中来清理它

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(){
    this._super.apply(this, arguments);
    this.render('topbar',{outlet: 'topbar', into: 'application'})
    this.render('botbar',{outlet: 'botbar', into: 'application'})

  }
})

现在您可以拥有以下索引模板

<div id="index">
  <div id="left">
    {{ outlet "left" }}
  </div>
  <div id="content">
    {{ outlet }}
  </div>
  <div id="right">
    {{ outlet 'right' }}
  </div>
</div>

您需要通过渲染“进入”它来阐明插座位于哪个上下文中。

App.IndexRoute = Ember.Route.extend({
  renderTemplate: function(){
    this._super.apply(this, arguments);
    this.render('right',{outlet: 'right', into: 'index'})
    this.render('left',{outlet: 'left', into: 'index'})

  }
})

【讨论】：

哇，这正是我想要的！非常感谢：D