jasonmit

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');

jasonmit

/**
 *  Tired of code reviewing for this..
 */
window.parseInt = (function(pI) { 
    return function() {
        var args = Array.prototype.slice.call(arguments);
        if(args.length === 1) { args.push(10); }
        
        return pI.apply(this, args); 
    }

jasonmit

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

.parent-component,
.child-component { display: block; }
</style>

<script type="text/x-handlebars" data-template-name="application">

jasonmit

<script type="text/x-handlebars" data-template-name="application">
    {{#search-container action='search' content=filteredContent}}
        {{search-input}}
        {{search-results row=App.PersonView}}
    {{/search-container}}
</script>

<script type="text/x-handlebars" data-template-name="person">
   <li>{{fullName}}</li>
</script>

jasonmit

<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}}

jasonmit

<style type="text/css">
body { font-family: "Helvetica Neue"; font-weight: 300; margin: 15px; font-color: dimgray; }
a { margin-right: 15px; }
h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
th { border-bottom: 1px solid darkgray; }
th, td { padding: 10px 15px 10px 0; }
</style>

<script type="text/x-handlebars" data-template-name="application">

jasonmit

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="tree-item">
    {{#if view.hasChildren}}
        <a {{action 'expand' target=view}}>
            {{#if view.parentView.shrinkDepth}}
                {{{view.parentView.depthLabel}}}
            {{/if}}

jasonmit

var ApplicationRoute = Ember.Route.extend({
    actions: {
      /*
       * Ensures that the loading substate is not entered until at least
       * 500ms of waiting for the model to resolve
       */
      loading: function() {
        var scheduledIntermediate = Ember.run.later(this, function() {
          this.intermediateTransitionTo('loading');
        }, 500);

jasonmit

Working example http://jsfiddle.net/NQKvy/475/

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    {{view 'form-group' placeholder='First Name'}}
    {{view 'form-group' placeholder='Last Name'}}
    {{view 'form-group' placeholder='Website'}}

jasonmit

import LazyLoadingViewMixin from 'app/mixins/grouped_view';
import LoadingBarView from 'app/views/universal/loading_bar';

var EntityListView = Ember.CollectionView.extend(LazyLoadingViewMixin, {
   tagName:            'ul',
   classNames:         ['list-group']
});

var ContainerView = Ember.ContainerView.extend({
    childViews: ['loader', 'list'],