Ember Latest

The latest build of Ember.

by Kerrick

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.7/ember-data.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.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 "uninherit"}} {{bind-attr disabled="uninherited"}}>Uninherit</button>
    <button {{action "rollback"}} {{bind-attr disabled="isClean"}}>Rollback</button>
    <h3>Properties</h3>
    <ul>
        <li>ID: {{id}}</li>
        <li>String: {{string}}</li>
        <li>Number: {{number}}</li>
        <li>Boolean: {{boolean}}</li>
        <li>
            {{#if inherited}}
                <b>This model is inherited</b>
            {{else}}
                <i>This model is not inherited</i>
            {{/if}}
        </li>
     </ul>
    <h3>Flags</h3>
    <ul>
        <li>isLoaded: {{isLoaded}}</li>
        <li>isDirty: {{isDirty}}</li>
        <li>isSaving: {{isSaving}}</li>
        <li>isDeleted: {{isDeleted}}</li>
        <li>isError: {{isError}}</li>
        <li>isNew: {{isNew}}</li>
        <li>isValid: {{isValid}}</li>
    </ul>
</script>

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: {
        uninherit: function() {
            this.get('currentModel').uninherit();
        },
        rollback: function() {
            this.get('currentModel').rollback();
        }
    }
});

App.Inheritable = Ember.Mixin.create({
    inherited: DS.attr('boolean'),
    uninherited: Ember.computed.not('inherited'),
    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'),
    bars: DS.hasMany('bar'),
    isClean: Ember.computed.not('isDirty')
});

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

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

$.mockjax({
    url: '/foos/1',
    responseText: {
        foos: [
            {
                id: 1,
                string: 'hello',
                number: 1000,
                boolean: true,
                inherited: true,
                bars: [2, 3]
            }
        ],
        bars: [
            {
                id: 2,
                name: 'Bar Two',
                inherited: true
            },
            {
...