Changeset Playground

components.super-hero.js

import Component from 'ember-component'
import Changeset from 'ember-changeset'

export default Component.extend({
  init() {
    this._super(...arguments);

    this.changeset = new Changeset(this.hero, this.validator)
    console.dir(this.changeset)
  },

  validator({key, newValue, oldValue, changes, content}) {
    
  }
})

controllers.index.js

import Controller from 'ember-controller'
import get from 'ember-metal/get'
import set from 'ember-metal/set'

export default Controller.extend({
  
})

routes.application.js

import Route from 'ember-route'

export default Route.extend({
  activate() {
    document.body.classList.add('standard')
  }
})

routes.index.js

import Route from 'ember-route'
import get from 'ember-metal/get'
import set from 'ember-metal/set'

class SuperHero {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  save() {
    return `${this.name} has been saved successfully!`
  }
}

export default Route.extend({
  model() {
    return new SuperHero('ironman', 36);
  }
})

styles.app.css

*, *::before, &::after {
  box-sizing: border-box;
}

templates.application.hbs

<header class="container-fluid">
  <h1>Ember Sandbox</h1>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

templates.components.super-hero.hbs

<h2>{{hero.name}} - {{hero.age}}</h2>

<hr>

<div>
  <input type="text" value={{readonly changeset.name}} oninput={{action (mut changeset.name) value="target.value"}}>
</div>

<div>
  <input type="number" value={{readonly changeset.age}} oninput={{action (mut changeset.age) value="target.value"}}>
</div>

templates.index.hbs

{{super-hero hero=model}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js",
    "hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.8.0/hack.css",
    "standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.8.0/standard.css",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-changeset": "latest"
  }
}