使用Ember.js进行多列布局

时间:2012-09-13 13:08:11

标签: ember.js

我想根据当前路线创建具有不同列布局的网站。

我基本上是通过预先在相应布局控制器中调用相应布局的每条路径来实现这一目的。

<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="twocolumns">

  <div class="row">
    <div class="span8">
        {{outlet main}}
    </div>
    <div class="span4">
        {{outlet sidebar}}
    </div>
  </div>


</script>

<script type="text/x-handlebars" data-template-name="home">
    <h1>Home</h1>
</script>

<script type="text/x-handlebars" data-template-name="sidebar">
    <h1>Sidebar</h1>
</script>


  home: Ember.Route.extend({
    route: '/',
    connectOutlets: function(router, event) {
        router.get('applicationController').connectOutlet('twocolumns');
        router.get('twocolumnsController').connectOutlet('main', 'home');
        router.get('twocolumnsController').connectOutlet('sidebar', 'sidebar');
    }
  }),

是否有更好的方法,例如使用不同的布局扩展Route类?

0 个答案:

没有答案