New Twiddle

controllers.application.js

import Ember from 'ember';
import { schema } from '../models/user';
import Validations from '../validations/user';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  Validations,
  changesets: {},
  
  allValid(changeArray) {
    return changeArray.every((change) => {
      return change.value
    });
  },
  
  save(changeArray) {
    return changeArray.forEach((change) => {
      change.value.execute();
    });
  },
  
  actions: {
    save() {
      var changesets = this.get('changesets');
      console.log(changesets);
      let changes = Object.keys(changesets).map(function saveChangeset(key) {
        let changeset = changesets[key];
        let snapshot = changeset.snapshot();
        return changeset
          .validate()
          .then(() => {
            if (Ember.get(changeset, 'isValid')) {
              return changeset;
            }
          }).catch(() => {
            changeset.restore(snapshot);
          });
      });
      return Ember.RSVP.allSettled(changes).then((changeArray) => {
        console.log(changeArray);
        if (this.allValid(changeArray)) {
          return this.save(changeArray);
        }
      });
    },
    
    reset(changeset) {
      var changesets = this.get('changesets');
      Object.keys(changesets).forEach(function resetChangeset(key) {
        let changeset = changesets[key];
      	return changeset.rollback();
      });
    },
    
    validateProperty(changeset, property, event) {
      let changesets = this.get('changesets')
      changesets[event.target.id] = changeset;
			this.set('changesets', changesets);
      let value = event.target.value;
      changeset.set(property, value);
      return changeset.validate(property);
    },
  }
});

models.user.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'),
  job: attr('stirng'),
  active: attr('boolean'),
  uuid: attr(),
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    this.get('store').createRecord('user', {
			name: 'Jim',
      job: 'Software engineer',
      active: true,
      uuid: Ember.uuid(),
    });
    this.get('store').createRecord('user', {
			name: 'Bob',
      job: 'Software engineer',
      active: true,
      uuid: Ember.uuid(),
    });
    return this.get('store').peekAll('user')
  }
});

templates.application.hbs

<h1>{{appName}}</h1>
<br>
<h2>Users</h2>
<br>
{{#each model as |user|}}
  
	{{#with (changeset user Validations) as |changeset|}}
    <div class="row">
      <input 
        type="text"
        value={{changeset.name}}
        onInput={{action "validateProperty" changeset "name"}}
        id={{changeset.uuid}}
      />
      ∆ {{changeset.name}}
      {{#if (get changeset.error "name")}}
        <small>
          <ul>
        {{#each (get (get changeset.error "name") "validation") as |message|}}
          <li>{{message}}</li>
        {{/each}}
          </ul>
        </small>
      {{/if}}
    </div>
    <div class="row">
      <input 
        type="text"
        value={{changeset.job}}
        onInput={{action "validateProperty" changeset "job"}}
        id={{changeset.uuid}}
      />
      ∆ {{changeset.job}}
      {{#if (get changeset.error "job")}}
        <small>
          <ul>
        {{#each (get (get changeset.error "job") "validation") as |message|}}
          <li>{{message}}</li>
        {{/each}}
          </ul>
        </small>
      {{/if}}
  </div>
  {{/with}}
  <div class="row">Values on the model<br><b>User:</b> {{user.name}} <br> <b>Job:</b> {{user.job}}</div>

  <hr />
{{/each}}
	<div class="row">
  	<button {{action "save"}} class="button-primary">Save</button>
  	<button {{action "reset"}}>Reset</button>
	</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",
    "skeleton-css": "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-changeset-validations": "1.2.6"
  }
}

validations.user.js

import { 
  validatePresence, 
  validateLength,
} from 'ember-changeset-validations/validators';

export default {
  name: [
    validatePresence(true),
    validateLength({ min: 3 })
  ],
  job: validatePresence(true)
}