changeset

application

import Ember from 'ember';

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

components.entry-table.js

import Ember from 'ember';

export default Ember.Component.extend({
  columns: ["name", "props.page", "props.other"],
  actions: {
    validateProperty(changeset, property) {
      return changeset.validate(property);
    }
  }
});

components.table-cell.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      name: "text one",
      entries: [
        { 
          name: "آگرہ",
          props: {
            page: 2,
            other: "foo"
          }
        },
        {
          name: "Беларусь",
          props: {
            page: 3,
            other: "bar"
          }
        }
       ]
    }
}
});

templates.application.hbs

<h2>{{model.name}}</h2>
{{entry-table model=model}}

templates.components.entry-table.hbs

<table>
	<thead><tr><th>Name</th><th>Page</th><th>Other</th></tr></thead>
  <tbody>
<tr><td colspan="3"><center><i>As regular model</i></center></td></tr>
    {{#each model.entries as |entry|}}
  <tr>
  	{{#each columns as |column|}}
  	<td>{{table-cell changeset=entry column=column}}</td>
		{{/each}}
   </tr>
    {{/each}}
   <tr><td colspan="3"><center><i>As changeset</i></center></td></tr>
  {{#each model.entries as |entry|}}
  {{#with (changeset entry) as |changeset|}}
  <tr>
  	{{#each columns as |column|}}
  	<td>{{table-cell changeset=changeset column=column}}</td>
		{{/each}}
   </tr>
   {{/with}}
    {{/each}}
  </tbody>
  </table>

templates.components.table-cell.hbs

{{get changeset column}}<br>
{{input
	type="text"
  value=(get changeset column)
  oninput=(action (mut (get changeset column)) value="target.value")
}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-changeset": "2.1.2",
    "ember-changeset-validations": "1.2.6"
  }
}