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>
  
  {{#tool-tip view='sampleArray' content=content}}
    <button>Sample Button (mouse over)</button>
  {{/tool-tip}}
</script>

CSS

html, body { font-family: 'HelveticaNeue' }
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul {  padding: 15px; font-size: 1.4em; color: green; }

.tool-tip {
    position: absolute;
    display: none;
    background: #888;
    border-radius: 3px;
    padding: 5px;
    color: #fff;
}
.tool-tip-container {
    position: relative;
}
.tool-tip-container:hover .tool-tip {
    display: block;
}

JavaScript

App = Ember.Application.create({});

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

App.SampleArrayView = Ember.View.extend({
    template: Ember.Handlebars.compile("{{#each content}}<div>{{firstName}}</div>{{/each}}")
});

App.ToolTipComponent = Ember.Component.extend({
    classNames: ['tool-tip-container'],
    // when no view is supplied, this template is used and defaults to handling strings
    // we could extend this to be smart and handle primitive arrays as well
    defaultView: Ember.View.extend({
        template: Ember.Handlebars.compile('{{this.content}}')
    }),
   
    template: Ember.Handlebars.compile('{{yield}}<div class="tool-tip">{{view _tooltipView}}</div>'),
    
    view: null,
    
    _tooltipView: null,
    
    init: function() {
        var view = this.get('defaultView');
        
        // for simplicity we'll pass it as a string, but you should 
        // support passing a reference (just check the type of view)
        if(!Ember.isEmpty(this.get('view'))) {
            view = this.container.lookupFactory('view:' + this.get('view'));
        }
        
        this.set('_tooltipView', view);
        
        this._super.apply(this, arguments);
    }
});