Question

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

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

无论内容是什么，我都希望topbar和botbar保持一致。内容可以是“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>

或“params content”

<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取决于路由）似乎是实例化的。

现在我想要的是更深入，并且每个子插座（leftsidebar，cart等）都有一个控制器，但我不知道如何构建第二级嵌套。

文档似乎没有帮助我，谷歌不是我的朋友:(你们可以帮助我吗？谢谢。

Answer 1

ember中的出口与当前活跃的路线有关。

如果您有以下申请模板

<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'})

  }
})

Ember路线+出口

1 个答案: