Ember Latest

The latest build of Ember.

by Kerrick

HTML

<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
<script src="https://rawgit.com/components/ember/master/ember-template-compiler.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="foo">
    <h2>Foo Content:</h2>
    <button {{action "rollback"}} {{bind-attr disabled="isClean"}}>Rollback</button>
    <button {{action "save"}} {{bind-attr disabled="isClean"}}>Save</button>
    <h3>Properties</h3>
    <ul>
        <li>ID: <code>{{id}}</code></li>
        <li>String: <code>{{input value=string}}</code></li>
        <li>Number: <code>{{number}}</code></li>
        <li>Boolean: <code>{{boolean}}</code></li>
        <li>
            {{#if inherited}}
                <b>This model is inherited</b>
            {{else}}
                <i>This model is not inherited</i>
            {{/if}}
        </li>
     </ul>
    <h3>Parent</h3>
    <ul>
        <li>ID: <code>{{parent.id}}</code></li>
        <li>Name: <code>{{parent.name}}</code></li>
        <li>isLoaded: <code>{{parent.isLoaded}}</code></li>
        <li>isDirty: <code>{{parent.isDirty}}</code></li>
        <li>isSaving: <code>{{parent.isSaving}}</code></li>
        <li>isDeleted: <code>{{parent.isDeleted}}</code></li>
        <li>isError: <code>{{parent.isError}}</code></li>
        <li>isNew: <code>{{parent.isNew}}</code></li>
        <li>isValid: <code>{{parent.isValid}}</code></li>
    </ul>
    <h3>Children</h3>
    <ul>
        {{#each child in children}}
            <li>
                <ul>
                    <li>ID: <code>{{child.id}}</code></li>
                    <li>Name: <code>{{child.name}}</code></li>
                    <li>isLoaded: <code>{{child.isLoaded}}</code></li>
   ...

CSS

ul ul {
    margin-bottom: 1em;
}

JavaScript

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

App.Router.map(function() {
    this.resource('foo', { path: '/foos/:foo_id' });
});

App.IndexRoute = Ember.Route.extend({
    beforeModel: function() { return this.transitionTo('foo', 1); }
});

App.FooRoute = Ember.Route.extend({
    model: function(params){
        return this.get('store').find('foo', params.foo_id);
    },
    actions: {
        rollback: function() {
            this.get('currentModel').rollback();
        },
        save: function() {
            this.get('currentModel').save();
        }
    }
});

App.Inheritable = Ember.Mixin.create({
    inherited: DS.attr('boolean'),
    uninherited: Ember.computed.not('inherited'),
    save: function() {
        if (this.get('inherited')) {
            this.uninherit();
        }
        this._super();
    },
    uninherit: function() {
        if (this.get('uninherited')) { return; }
        this.setProperties({
            _inheritedId: this.get('id'),
            id: undefined,
            inherited: false
        });
        this.transitionTo('loaded.created.uncommitted');
    },
    rollback: function() {
        if (this.get('_inheritedId')) {
            this.set('id', this.get('_inheritedId'));
        }
        this._super();
        this.transitionTo('loaded.saved');
    }
});

App.Foo = DS.Model.extend(App.Inheritable, {
    string: DS.attr('string'),
    number: DS.attr('number'),
    boolean: DS.attr('boolean'),
    isClean: Ember.computed.not('isDirty'),
    parent: DS.belongsTo('parent'),
    children: DS.hasMany('child')
});

App.Child = DS.Model.extend({
    name: DS.attr('string'),
    foo: DS.belongsTo('foo')
});

App.Parent = DS.Model.extend({
    name: DS.attr('string'),
    foos: DS.hasMany('foo')
});

App.ApplicationAdapter = DS.RESTAdapter.extend();

$.mockjax({
    url: '/foos/1',
    responseText: {
        foos: [
            {
                id: 1,
                string: 'hello',
                number: 1000,
                boolean:...