Evaluate ember-changeset

controllers.application.js

import Ember from 'ember';
import Changeset from 'ember-changeset';

export default Ember.Controller.extend({
  pojo: {
    foo: 123,
    bar: 456,
    baz: Ember.Object.create()
  },

  pojoChangeSet: Ember.computed('pojo', function () {
    const pojo = this.get('pojo');
    return new Changeset(pojo);
  }),

  pojoNested: {
    foo: 123,
    inner: {
      bar: 456
    }
  },

  pojoNestedChangeSet: Ember.computed('pojoNested', function () {
    const pojoNested = this.get('pojoNested');
    return new Changeset(pojoNested);
  }),

  dsModel: Ember.computed(function () {
    const store = this.get('store');
    const bar = store.createRecord('bar', {
      name: 'bar'
    });

    return store.createRecord('foo', {
      name: 'foo',
      inner: Ember.Object.create(),
      bar
    });
  }),

  dsModelChangeSet: Ember.computed('dsModel', function () {
    const dsModel = this.get('dsModel');
    return new Changeset(dsModel);
  }),

  actions: {
    rollback(changeSet) {
      changeSet.rollback();
    },

    save(changeSet) {
      changeSet.save();
    },

    changeObject(changeSet, path) {
      changeSet.set(path, Ember.Object.create());
    },

    changeRelationship(changeSet, path, model) {
      const instance = this.get('store').createRecord(model, {
        name: `${model} (created ${Date.now()})`
      });
      changeSet.set(path, instance);
    }
  }
});

models.bar.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),

  inner: DS.attr(),

  bar: DS.belongsTo('bar')
});

models.foo.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
});

templates.application.hbs

<div>
  <h3>POJO</h3>
  <label>foo: {{input value=pojoChangeSet.foo}}</label>
  <label>bar: {{input value=pojoChangeSet.bar}}</label>
  <button type="button" {{action 'changeObject' pojoChangeSet 'baz'}}>Change 'baz' object</button>
  <button type="button" {{action 'rollback' pojoChangeSet}}>Rollback</button>
  <button type="button" {{action 'save' pojoChangeSet}}>Save</button>
  <ul>
    <li>pojo:
      <ul>
        <li>foo: {{pojo.foo}}</li>
        <li>bar: {{pojo.bar}}</li>
        <li>baz: {{pojo.baz}}</li>
      </ul>
    </li>
    <li>pojoChangeSet:
      <ul>
        <li>foo: {{pojoChangeSet.foo}}</li>
        <li>bar: {{pojoChangeSet.bar}}</li>
        <li>baz: {{pojoChangeSet.baz}}</li>
      </ul>
    </li>
  </ul>
</div>

<div>
  <h3>POJO nested</h3>
  <label>foo: {{input value=pojoNestedChangeSet.foo}}</label>
  <label>bar: {{input value=pojoNestedChangeSet.inner.bar}}</label>
  <button type="button" {{action 'rollback' pojoNestedChangeSet}}>Rollback</button>
  <button type="button" {{action 'save' pojoNestedChangeSet}}>Save</button>
  <ul>
    <li>pojoNested:
      <ul>
        <li>foo: {{pojoNested.foo}}</li>
        <li>inner.bar: {{pojoNested.inner.bar}}</li>
      </ul>
    </li>
    <li>pojoNestedChangeSet:
      <ul>
        <li>foo: {{pojoNestedChangeSet.foo}}</li>
        <li>inner.bar: {{pojoNestedChangeSet.inner.bar}}</li>
      </ul>
    </li>
  </ul>
</div>

<div>
  <h3>DS.Model Instance</h3>
  <label>name: {{input value=dsModelChangeSet.name}}</label>
  <label>bar.name: {{input value=dsModelChangeSet.bar.name}}</label>
  <button type="button" {{action 'changeObject' dsModelChangeSet 'inner'}}>Change 'inner' object</button>
  <button type="button" {{action 'changeRelationship' dsModelChangeSet 'bar' 'bar'}}>Change 'bar' with new instance</button>
  <button type="button" {{action 'rollback' dsModelChangeSet}}>Rollback</button>
  <button type="button" {{action 'save' dsModelChangeSet}}>Save</button>
  <ul>
    <li>dsModel:
      <ul>
        <li>name: {{dsModel.name}}</li>
        <li>inner: {{dsModel.inner}}</li>
        <li>bar: {{dsModel.bar}}</li>
        <li>bar.name: {{dsModel.bar.name}}</li>
      </ul>
    </li>
    <li>dsModelChangeSet:
      <ul>
        <li>name: {{dsModelChangeSet.name}}</li>
        <li>inner: {{dsModelChangeSet.inner}}</li>
        <li>bar: {{dsModelChangeSet.bar}}</li>
        <li>bar.name: {{dsModelChangeSet.bar.name}}</li>
      </ul>
    </li>
  </ul>
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-changeset": "1.3.0"
  }
}