Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js"></script>
<script type="text/x-handlebars">
  <h2>Fun w Components</h2>

  {{#mach-ty}}  
    {{#content-for 'shared-thing'}}
      overridden shared thing
    {{/content-for}}
    
    {{#content-for 'scum-bag'}}
      I'm overriding the default scum-bag template content.
      {{shared-thing}}
    {{/content-for}}    
  {{/mach-ty}}
</script>
<script type="text/x-handlebars" data-template-name="components/mach-ty">
  {{#content-for 'shared-thing'}}
    SHARED THING
  {{/content-for}}

  {{#content-for 'scum-bag'}}
    I am a DEFAULT scumbag.
  {{/content-for}}

  {{eval}}
  <h1>{{content-for 'scum-bag'}}</h1>
  <h2>{{content-for 'shared-thing'}}</h2>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});
// eval helper evaluates template nested in component immediately,
// thus obtaining content-for templates before they are used in
// component template.
Ember.Handlebars.registerHelper("eval", function (options) {
      var view = options.data.view;

      while (view && !Ember.get(view, 'layout')) {
        if (view._contextView) {
          view = view._contextView;
        } else {
          view = Ember.get(view, '_parentView');
        }
      }
      view.get('template')(view.get('context'), options);
});

App.MachTyComponent = Ember.Component.extend({
  registerHelpers: function() {
    var container = this.container = new Ember.Container(this.container);

    container.register('helper:content-for', function(name, options) {
      if (options.fn) {
        // Block was provided; capture content.
        container.register('render-content:' + name, options.fn);
      } else {
        var renderContent = container.lookupFactory('render-content:' + name);
        return renderContent.call(this, options);
      }
    });
  }.on('init')
});