Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
  <ul>
  {{#each}}
      <li>
        {{#foo-bar}}
            {{firstName}}
            {{component.test}}
            <button {{action 'whoa' target='component'}}>Test</button>
        {{/foo-bar}}
      </li>
  {{/each}}
   </ul>
</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({});
var get = Ember.get, set = Ember.set, View = Ember.View;
App.FooBarComponent = Ember.Component.extend({
    test: 'I am from the component!',
    layout: Ember.Handlebars.compile("{{yield}}"),
    _yield: function(context, options) {
    var view = options.data.view,
        parentView = this._parentView,
        template = get(this, 'template');

    if (template) {
      Ember.assert("A Component must have a parent view in order to yield.", parentView);

      view.appendChild(View, {
        isVirtual: true,
        tagName: '',
        _contextView: parentView,
        template: template,
        context: Ember.ObjectProxy.create({ 
            content: get(parentView, 'context'),
            component: this
        }),
        controller: get(parentView, 'controller'),
        templateData: { keywords: parentView.cloneKeywords() }
      });
    }
    },
    actions: {
        whoa: function() { alert(this.elementId); }
    }
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
          {firstName: 'Kris', lastName: 'Selden'},
          {firstName: 'Luke', lastName: 'Melia'},
          {firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ];
  }
});