Changeset test

controllers.create.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save() {
      let changeset = this.get('model');
      console.log(
        'Widget name:[%s] props.foo:[%s] props.bar:[%s]',
        changeset.get('name'),
        changeset.get('props.foo'),
        changeset.get('props.bar'),
    	);
			changeset.validate().then(() => {
        if (changeset.get('isValid')) {
          console.log('Changeset is valid. Saving...');
 					changeset.save().then(() => {
            console.log('Changeset successfully saved');
			      this.transitionToRoute('index');
          }).catch((err) => {
            console.log('Error while saving changeset:', err);
          });
        } else {
          console.log('Changeset is not valid. Not saving');
          console.log('Changeset error:', changeset.get('error'));
          console.log('Changeset errors:', changeset.get('errors'));
        }
      });
    }
  }
});

models.widget.js

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

export default Model.extend({
  name: attr('string', { defaultValue: 'New widget' }),
  props: attr('widget-props')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('create');
});

export default Router;

routes.create.js

import Ember from 'ember';
import Changeset from 'ember-changeset';
import lookupValidator from 'ember-changeset-validations';
import WidgetValidations from '../validations/widget';

export default Ember.Route.extend({
  model() {
    let newWidget = this.get('store').createRecord('widget', {
      props: {
        foo: 'Foo',
        bar: 'Bar'
      }
    });
    return new Changeset(newWidget, lookupValidator(WidgetValidations), WidgetValidations);
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

* {
  box-sizing: border-box;
}

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

nav {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin-bottom: 2em;
  padding: 10px 0px 14px 0px;
}

li {
	margin-bottom: 1em;
}

li > div {
	margin-bottom: 0.25em;
}

form > div.row {
  margin-bottom: 1.5em;
  background-color: #eeeeee;
  padding: 10px;
}

form > div.row > label {
  display: block;
  margin-bottom: 8px;
}

form > div.row > input[type="text"] {
  font-size: 1em;
  width: 100%;
  padding: 2px;
}

templates.application.hbs

{{outlet}}

templates.create.hbs

<h1>Create widget</h1>

<nav>
	{{#link-to "index"}}Home{{/link-to}}
</nav>

<form>
	<div class="row">
		<label>Widget name</label>
    {{input value=model.name}}
	</div>

	<div class="row">
		<label>Widget props (foo)</label>
    {{input value=model.props.foo}}
	</div>

	<div class="row">
		<label>Widget props (bar)</label>
    {{input value=model.props.bar}}
	</div>
  
	<div class="row">
    <button type="button" {{action "save"}}>Save</button>
	</div>
</form>
 

templates.index.hbs

<h1>Home</h1>

<nav>
	{{#link-to "create"}}Create widget{{/link-to}}
</nav>

transforms.widget-props.js

import DS from 'ember-data';

export default DS.Transform.extend({
  deserialize(serialised) {
    return {
      aDifferentFoo: serialised.foo,
      aDifferentBar: serialised.bar
    }
  },

  serialize(deserialised) {
    return {
      foo: deserialised.aDifferentFoo,
      bar: deserialised.aDifferentBar
    }
  }
});

twiddle.json

{
  "version": "0.13.0",
  "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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
		"ember-changeset": "1.4.2-beta.0",
		"ember-changeset-validations": "1.2.4",
    "ember-data": "2.16.3"
  }
}

validations.widget.js

import validateWidgetProps from '../validators/widget-props';

export default {
  props: validateWidgetProps()
};

validators.widget-props.js

export default function validateWidgetProps() {
  return (key, response) => {
    return true;
  };
}