New Twiddle

components.object-editor-alt.js

import Ember from 'ember'

export default Ember.Component.extend({
  actions: {
    update(key, value) {
      this.update(key, value)
    }
  }
});

components.object-editor.js

import Ember from 'ember'

export default Ember.Component.extend({
  path: 'obj',
  
  update(key, value) {
    if (this.get('parent')) {
       console.log('sending to parent...', key)
       this.get('parent').update(key, value)
    }
    else {
      console.log('setting: ', key, value)
      this.set(key, value)
      // this.notifyPropertyChange(key)
    }
  },
  
  actions: {
    update(key, value) {
      this.update(key, value)
      console.log('after:', this.get('obj'))
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    update(key, value) {
     console.log(`updating ${key} to ${value}`);
     this.model.set(`variables.${key}`, value);
    }
  }
});

helpers.is-object.js

import Ember from 'ember';

export function isObject(params/*, hash*/) {
  return params[0] && typeof params[0] === 'object';
}

export default Ember.Helper.helper(isObject);

helpers.to-json.js

import Ember from 'ember';

export function toJson(params/*, hash*/) {
  return JSON.stringify(params, null, 2);
}

export default Ember.Helper.helper(toJson);

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.Object.create({
      "variables": {
        "foo": "bar",
        "styles": {
          "colors": {
            "red": "#e3342f",
            "green": "#38c172",
            "blue": "#3490dc"
          }
        }
      },
      "pages": [
        {
          "route": "/",
          "body": [
            {
              "type": "partial",
              "name": "header"
            },
            {
              "type": "tag",
              "name": "main",
              "children": [
                {
                  "type": "tag",
                  "name": "p",
                  "attributes": {
                    "class": "py-4"
                  },
                  "children": [
                    {
                      "type": "text",
                      "value": "lorem ipsum blah blah blah"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    });
  }
});

templates.application.hbs

<h2>object-editor</h2>
<h3>recursively pass in self as parent, bubble up</h3>
{{object-editor obj=model.variables}}

<hr>

<h2>object-editor-alt</h2>
<h3>directly call set</h3>
{{object-editor-alt obj=model.variables}}

<hr>

<h2>direct model output</h2>
<ul>
  <li>red: {{model.variables.styles.colors.red}}</li>
  <li>green: {{model.variables.styles.colors.green}}</li>
  <li>blue: {{model.variables.styles.colors.blue}}</li>
</ul>

<h2>to-json helper</h2>
<pre>
{{to-json model.variables}}
</pre>

{{outlet}}

templates.components.object-editor-alt.hbs

<ul>
  {{#each-in obj as |key value|}}
  	<li>
    	{{key}}
    	{{#if (is-object value)}}
      	{{object-editor obj=value}}
      {{else}}
        {{input 
          key-up=(action "update" value=target.value)
          value=value
        }}
      {{/if}}
     </li>
  {{/each-in}}
</ul>

templates.components.object-editor.hbs

{{#unless parent}}
  <button >save</button>
{{/unless}}
<ul>
  {{#each-in obj as |key value|}}
  	<li>
    	{{key}}
    	{{#if (is-object value)}}
      	{{object-editor path=(concat path "." key) obj=value parent=this}}
      {{else}}
        {{input 
          key-up=(action "update"
          			 	(concat path "." key)
                  value=target.value)
          value=value
        }}
      {{/if}}
     </li>
  {{/each-in}}
</ul>

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"
  }
}