New Twiddle

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
	@service('store') store;

	constructor() {
  	super(...arguments);
    this.setup();
  }
	@action setup() {
    this.store.pushPayload({
      included: [ 
      		{id: '1', type: 'meta-attribute', attributes: { value: 'a', name: 'firstname' } },      	          	{id: '2', type: 'meta-attribute', attributes: { value: 'b', name: 'lastname' } }

      ],
    	data: { 
        id: '1', 
        type: 'meta-model', 
        relationships: { 
          'meta-attributes': {
      			data: [
          		{id: '1', type: 'meta-attribute'},
          		{id: '2', type: 'meta-attribute'},
        		]
      		} 
      	}
    	}
    });
  	this.set('items', this.store.peekAll('meta-model'));
  }
}

models.meta-attribute\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';	
export default class extends Model {
  @attr('string') value;
  @attr('string') name;
}

models.meta-model\.js

import Model from 'ember-data/model';
import { belongsTo, hasMany } from 'ember-data/relationships';
import EmberObject, { computed, defineProperty, get } from '@ember/object';
import { alias } from '@ember/object/computed';
import { camelize } from '@ember/string';

const ATTR_MODEL_PREFIX = '_model_';

function computedAttrs() {
  const attrsList = EmberObject.create({});
  const data = this.metaAttributes.reduce(
    (result, model) => {
      const propName = camelize(get(model, 'name'));
      defineProperty(
        result,
        `${ATTR_MODEL_PREFIX}${propName}`,
        computed(function() {
          return model;
        })
      );
      defineProperty(
        result,
        propName,
        alias(`${ATTR_MODEL_PREFIX}${propName}.value`)
      );
      return result;
    },
    attrsList
  );
  return data;
}

export default class extends Model.extend({
	attrs: computed('[email protected]', computedAttrs),
  attrModelsHash: computed('attrs', function() {
    const attrsMap = EmberObject.create({
      attrs: this.attrs
    });
    this.attrNames.forEach((attrName) => {
      defineProperty(
        attrsMap,
        attrName,
        alias(`attrs.${ATTR_MODEL_PREFIX}${attrName}`)
      );
    });
    return attrsMap;
  }),
   attrNames: computed('attrs', function() {
    return Object.keys(get(this, 'attrs')).filter((name) => {
      return !name.startsWith(ATTR_MODEL_PREFIX);
    });
  }),
  firstname: alias('attrModelsHash.firstname.value'),
  lastname: alias('attrModelsHash.lastname.value')
}) {
  @hasMany('meta-attribute', { async: false })
  metaAttributes;
}

templates.application\.hbs

<button {{on "click" this.setup}}>Setup</button>
<br>
Items: {{this.items.length}}
<br>


Firstname: {{this.items.firstObject.firstname}}
<br>

Lastname: {{this.items.firstObject.lastname}}
<br>

Attrs:
<br>

{{#each this.items.firstObject.metaAttributes as |model|}}
	<Input @value={{model.value}} /><br>
{{/each}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.0",
    "ember-template-compiler": "3.18.0",
    "ember-testing": "3.18.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0"
  }
}