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

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

<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

<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

/**
 *  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

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

//
// Example: http://jsbin.com/welusizema/1/edit
//
// Since observers are not async, it's usually a good
// practice, when observing numerous properties, to
// wrap the observer function with an Ember.run.once.
// ```
// fooBarChanged: Ember.observer('foo', 'bar', function () {
//   Ember.run.once(this, this.scheduledChange);
// }),

jasonmit

/* 
 * The `didCreate` event on a DS.Model does not behave like one would expect.
 * It actually only ever fires when you createRecord AND then save the record.
 *
 * This custom eventing below is how you achieve a the expected event.
 * This is useful in the case where you have relational objects that you want 
 * to auto-create when a record is created.  Or, some custom logic to implement 
 * once the record is created.  Likely very useful where you want to setup 
 * observers for things like validation.  Placing them in `init` wouldn't
 * be ideal since they will trigger the first time the model is initialized

jasonmit

• Other

  • http://emberjs.jsbin.com/rwjblue/251/edit?html,js,output - Opening a window and communicate with it.
  • http://emberjs.jsbin.com/rwjblue/55/edit - Using liquid-fire animations in globals mode.
  • http://emberjs.jsbin.com/rwjblue/151/edit?js,output - Modify computed dependent keys after initialization.

• POJO's

  • http://emberjs.jsbin.com/rwjblue/253/edit?js,output - Defining computed properties on a POJO.

• Routing

  • http://emberjs.jsbin.com/rwjblue/254/ - Shows route hook ordering.