Ember路线+出口

时间:2014-02-07 10:41:33

标签: ember.js routing states

在潜入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等)都有一个控制器,但我不知道如何构建第二级嵌套。

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

1 个答案:

答案 0 :(得分: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'})

  }
})