Skip to content

Instantly share code, notes, and snippets.

@gavacho
Created November 16, 2012 23:22
Show Gist options
  • Save gavacho/4091852 to your computer and use it in GitHub Desktop.
Save gavacho/4091852 to your computer and use it in GitHub Desktop.
Ember Containers

I would like to create a Oocss.Module view which encapsulates boilerplate markup which is part of stubornella's Object Oriented CSS (https://github.com/stubbornella/oocss/wiki). The boilerplate markup looks like this:

<div class="mod">
  <b class="top"><b class="tl"></b><b class="tr"></b></b>
  <div class="inner">
    <div class="hd">...</div>
    <div class="bd">...</div>
    <div class="ft">...</div>
  </div>
  <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>

As you see, there are three placeholder regions: div.hd, div.bd and div.ft. I was thinking multiple {{yield}} statements could make it easy to populate those placeholders.

But it's kinda ignoring the ideal scenario, imo, which would be something like:

{{#view Oocss.Module}}

  {{#childView Ember.View
               placeholder="hd"}}
    this will be inside div.hd
  {{/childView}}

  {{childView App.ExampleView
              placeholder="bd"
              contentBinding="someProperty"}}

  {{#childView Ember.View
               placeholder="ft"}}
    this will be inside div.ft
  {{/childView}}

{{/view}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment