New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
 	showMergedByGet: true,
 
  schema: Ember.computed(function(){
    var fieldNames = ['Tom','Dick','Harry'];
    var fields = fieldNames.map(name => {
    	return this.store.createRecord('field', {
    					name: name, type: 'string'
  						});
  	});
		var schema = this.store.createRecord('schema');
		schema.set('fields', fields);
		return schema;
  }),
  
  actions: {
    addSchemaToModel: function() {
      this.get('model').set('schema', this.get('schema'));
    },
    viewMergedByGet: function() {
      this.set('showMergedByGet', true);
    },
    viewMergedByBelongsTo: function() {
      this.set('showMergedByGet', false);
    },
    removeSchemaFromModel: function() {
      this.get('model').set('schema', null);
    }
  }
});

models.dynamic-model.js

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

export default Model.extend({
  fields: hasMany('field'),
  schema: belongsTo('schema'),
  /**
  merge local fields and schema fields
  access get with this.get('schema')
  */
  mergedByGet: Ember.computed('fields.[]',         	'schema.fields.[]', function() {
    console.log("in mergedfields");
    var merged = [];
    var schema = this.get('schema');
    
    var constr = schema && schema.constructor ? 
        				schema.constructor.modelName :
                'no constructor';
    console.log(`modelname of schema loaded is ${constructor}`); 
   
    var schemaFields = schema && schema.get('fields');
    console.log(`schemaFields is type ${typeof schemaFields}`);
  
    if (schemaFields) {
      merged.addObjects(schemaFields);
    }

    //we don't really care about model.fields in this example
    return merged;
  }), 
    /**
  merge local fields and schema fields
  access get with this.belongsTo('schema').value()
  */
  mergedByBelongsTo: Ember.computed('fields.[]',         	'schema.fields.[]', function() {
    console.log("in mergedfields");
    var merged = [];
    var schema = this.belongsTo('schema').value();
    
    var constr = schema && schema.constructor ? 
        				schema.constructor.modelName :
                'no constructor';
    console.log(`modelname of schema loaded is ${constructor}`); 
   
    var schemaFields = schema && schema.get('fields');
    console.log(`schemaFields is type ${typeof schemaFields}`);
  
    if (schemaFields) {
      merged.addObjects(schemaFields);
    }

    //we don't really care about model.fields in this example
    return merged;
  }), 
  
});

models.field.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'),
  type: attr('string')
});

models.schema.js

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

export default Model.extend({
  fields: hasMany('field', {async: false})
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return this.store.createRecord('dynamic-model');
  }
});

templates.application.hbs

<p>Purpose: If you add a 'belongsTo' value to a model, watchers trigger, but cannot access the newly set belongsTo with this.get(*propertyName*). They can, however, access the value with this.belongsTo(*propertyName*).value()</p>
<h1> Add Schema to Model </h1>
<button {{action 'addSchemaToModel'}}>Add Schema To Model</button>
<button {{action 'removeSchemaFromModel'}}>Remove Schema From Model</button>
<br/>
<h3>Schema fields</h3>
{{#each schema.fields as |field|}}
	<label>{{field.name}}<input type='text'/></label><br/>
{{/each}}
<br/>
<button {{action 'viewMergedByGet'}}>View Merged By Get</button>
<button {{action 'viewMergedByBelongsTo'}}>View Merged By belongsTo().value()</button>

{{#if showMergedByGet}}
  <h3>Model fields - Merged By Get</h3>
  {{#each model.mergedByGet as |field|}}
    <label>{{field.name}}<input type='text'/></label><br/>
  {{/each}}
 {{else}}
 	  <h3>Model fields - Merged By BelongsTo</h3>
  {{#each model.mergedByBelongsTo as |field|}}
    <label>{{field.name}}<input type='text'/></label><br/>
  {{/each}}
 {{/if}}

twiddle.json

{
  "version": "0.15.0",
  "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.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0"
  }
}