mx-setting.js

mx-setting.hbs

<div class="col-md-4">
  <dl class="dl-settings">
    <dt>{{setting.name}}</dt>
    <dd><em>{{setting.description}}</em></dd>
  </dl>
</div>
<div class="col-md-2">
  {{!-- {{x-toggle toggled=setting.value showLabels=true}} --}}
  {{dynamic-component type=setting.valueType toggled=setting.value showLabels="true" toggle="toggle"}}
</div>

mx-setting.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['row'],
  setting: null,

  actions: {
    toggle: function(isToggled) {
      this.set('setting.value', isToggled);
      this.sendAction();
    },

    save: function() {
      console.log(this.get('setting'));
      this.sendAction();
    }
  }
});

settings.hbs

<div class="box box-primary box-solid">
 	<div class="box-header">
 		<h3 class="box-title">Available Settings</h3>
 	</div>
	<div class="box-body">
    {{#if attrs.settings}}
      {{#each attrs.settings as |setting|}}
        {{mx-setting setting=setting action="save"}}
      {{/each}}
    {{else}}
      <p>No settings found</p>
    {{/if}}
  </div>
</div>

settings.js

// app/routes/engineering/settings.js
import Ember from 'ember';
import AuthenticatedRoute from '../authenticated';

export default AuthenticatedRoute.extend({
  beforeModel: function (transition) {
    this._super(transition);
    this.set('moduleName', this.controllerFor('application/header').get('activeModule'));
  },

  model: function() {
    let moduleName = this.get('moduleName');
    return this.store.findQuery('application-configuration', { module: 'Engineering' });
  },

  setupController: function(controller, model) {
    console.log('MODEL');
    console.log(model);
    controller.set('attrs.settings', model.content);
  },

  actions: {
    save: function(model) {
      console.log('ROUTE:SAVE');
      console.log(model);
    }
  }
});