New Twiddle

controllers.application.js

import Ember from 'ember';

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

models.mask.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import {validator, buildValidations} from 'ember-cp-validations';
import Ember from 'ember';

const { get, computed } = Ember;

export const Validations = buildValidations({
	A: [
		validator('presence', true),
		validator('number', {
			allowString: true,
      integer: true,
			message: 'Must be a number'
		})
	],
  B: [
		validator('presence', true),
    validator('number', {
      allowString: true,
      integer: true,
      gt: computed(function() {
        let a = get(this, 'model.A');
        let bottomLimit = null;
        
        if (a > 10 && a < 20) {
          bottomLimit = 0;
        } else {
          bottomLimit = 5;
        }
        
        return bottomLimit;
      }),
      lt: computed(function() {
        let a = get(this, 'model.A');
        let upperLimit = null;
        
        if (a > 10 && a < 20) {
          upperLimit = 5;
        } else {
          upperLimit = 10;
        }
        
        return upperLimit;
      })
    })
	]
});

export default Model.extend(Validations, {
	A: attr('number'),
	B: attr('number')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	let video = this.store.createRecord('mask');
    return video;
  }
});

templates.application.hbs

<form>
	<p>
  	<label>A<br>
  	{{input size="50" type="url" value=model.A placeholder="An integer"}}
    </label><br>
  	is valid? {{model.validations.attrs.A.isValid}}<br>
    {{model.validations.attrs.A.message}}
  </p>
  <p>
  	<label>B<br>
    {{input size="50" value=model.B placeholder="An integer"}}
    </label><br>
  	is valid? {{model.validations.attrs.B.isValid}}<br>
    {{model.validations.attrs.B.message}}
  </p>
</form>

{{outlet}}

twiddle.json

{
  "version": "0.10.7",
  "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.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {
  	"ember-cp-validations": "3.1.4"
  }
}