New Twiddle

components.settings-page.js

import Ember from 'ember';
import {
    validator,
    buildValidations
}
from 'ember-cp-validations';

const Validations = buildValidations({
    'maxUpdates': validator('number', {
        allowString: true,
        integer: true,
        gte: 1,
        lte: Ember.computed.readOnly('model.allowedMaxUpdates'),
        disabled: Ember.computed.equal('model.alarmType', 'Email')
    })
});

export default Ember.Component.extend(Validations, {
  alarmType: 'Email',
  allowedMaxUpdates: 10,
  actions: {
        selectAlarmService(service) {
            this.set('alarmType', service);
        },
    		save() {
          this.sendAction('onSave', this.get('maxUpdates'), this.get('alarmType'));
        }
	}
});

controllers.application.js

import Ember from 'ember';

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

controllers.new.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save(updates, type) {
      this.get('model').set('maxUpdates', updates);
      this.get('model').set('alarmType', type);
      this.get('model').save().then((model) => {
        this.transitionToRoute('view',model);
    });
  }
}
});

helpers.eq.js

import Ember from 'ember';

export function eq(params/*, hash*/) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(eq);

models.my-model.js

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

export default Model.extend({
  maxUpdates: attr(),
  alarmType: attr()
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('new');
  this.route('view', {path: '/:a_id'});
  this.route('edit', {path: '/:ab_id'});
});

export default Router;

routes.edit.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
      return this.store.findRecord('my-model', params.ab_id);
  }
});

routes.new.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
      return this.store.createRecord('my-model', {
          maxUpdates: -12,
        	alarmType: 'Other'
      });
  }
});

routes.view.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
      return this.store.findRecord('my-model', params.a_id);
  }
});

templates.application.hbs

{{#link-to 'new'}}New{{/link-to}}
{{#link-to 'view'}}View{{/link-to}}
{{outlet}}

templates.components.settings-page.hbs

<div id="divDrqsUpdateSettings" class="form-group {{if validations.attrs.maxUpdates.isInvalid 'has-error'}}">
    <label class="col-sm-2 control-label">Max Ticket Updates</label>
    <div class="col-sm-10">
        <div class="row">
            <div class="col-sm-2">
                {{input type="number" value=maxUpdates id="inpMaxUpdates" class="form-control col-sm-3" min=1}}
            </div>
            {{#if validations.attrs.maxUpdates.isInvalid}}
            <div class="col-sm-12">
                <span class="help-block">{{validations.attrs.maxUpdates.message}}</span>
            </div>
            {{/if}}
        </div>
    </div>
</div>
<div id="divAlarmType" class="form-group {{if validations.attrs.alarmType.isInvalid 'has-error'}}">
    <label class="col-sm-2 control-label"> Alert Using </label>
    <div class="col-sm-10">
    <div class="radio">
     <label class="sm-margin-left">
          <input type="radio" id="rdbHour" checked="{{if (eq alarmType 'Email') true}}" name="rdbUpdateFreq" onClick={{action 'selectAlarmService' 'Email'}}>
          Email
      </label>
      <label class="sm-margin-left">
          <input type="radio" id="rdbHour" checked="{{if (eq alarmType 'Other') true}}" name="rdbUpdateFreq" onClick={{action 'selectAlarmService' 'Other'}}>
          Other
      </label>
    </div>
    </div>
</div>
<button class="btn btn-default" type="button" {{action 'save'}}>Save</button>

templates.edit.hbs

{{settings-page maxUpdates=model.maxUpdates alarmType=model.alarmType onSave=(action 'save')}}

templates.new.hbs

{{settings-page maxUpdates=model.maxUpdates alarmType=model.alarmType onSave=(action 'save')}}

templates.view.hbs

<div>Alarm Type: {{model.alarmType}}</div>
<div>Max Updates: {{model.maxUpdates}}</div>
{{#link-to 'edit' model}}Edit{{/link-to}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.2",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.8.2",
    "ember-testing": "2.8.2",
    "ember-truth-helpers": "1.2.0",
    "ember-cli-mirage": "0.2.4"
  },
  "addons": {
  	"ember-cp-validations": "3.1.2",
    "ember-bootstrap": "0.11.2"
  }
}