Layouts without views

1

I am considering upgrading my code base to the latest and greatest and making room for life without controllers and views with everything basically being a component or tree of components.

I have components pretty much everywhere apart from the top level routes like /contacts or /contatct/:contact_id etc.

The pattern I have used throughout my code is to use a layout for each top level view so that I can share the markup amongst all views and avoid duplication.

I might have a view like this:

App.ContactView = Ember.View.extend
  layoutName: "layouts/two_column"

or

Ap.SomeOtherView = Ember.View.extend
  layoutName: "layouts/single_column"

This has been very nice because I can share the markup among all the views without duplication.

My two_column layout might look like this:

<div class="two-column-layout">
  <div class="sidebar">
    {{outlet sidebar}}
  </div>
  <div class="main-content">
    {{yield}}
  </div>
</div>

I then used renderTemplate to set any outlets:

  renderTemplate: ->
    @render()
    @render 'contact/sidebar',
      into: 'contact'
      outlet: 'sidebar'

How can I use layouts in the new world where I would have a top level component without duplicating my markup in each top level component?

I’ve found using layouts like this has saved me a lot of duplication and I hope there is something similar that I can use with components.

2

I don’t believe this will be answered until routeable components land. But here is something I threw together that gets the behavior you are after by reusing the two column layout across your two column components by hacking on yield

Also, there is an RFC opened which would enable something along the lines of:

<contact-layout as |c|>
  <c.sidebar>sidebar content</c.sidebar>
  <c.main>main content</c.main>
</contact-layout>

All this said, I’d stick with what you have until there is an official way forward or someone suggests something I’m not thinking about :slight_smile: