Ember-Stickler-Sample

application.controller.js

import Ember from 'ember';

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

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    check() {
      console.log('actions trigger');
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>

{{#validated-form as |form|}}
	{{#form.validation minLength=8 rules="trim required min-length" as |v|}}
   	{{input
       class=(join ' ' 'factsumo-input' (for-bool v.state.valid 'has-success' 'has-error' 'normal'))
       type="password"
       autocomplete="new-password"
       placeholder='Password'
       value=myNewPassword
       focus-out=(action v.validate myNewPassword)
       input=(action v.check myNewPassword)
   }}
 	{{/form.validation}}
 {{/validated-form}}
<div {{action 'check'}}>asdasd</div>
{{outlet}}
<br>
<br>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

input {
  width: 100%;
  height: 32px;
  border-radius: 5px;
  border-width: 2px
}
.has-success {
  border-color: green;
}
.has-error {
  border-color: red;
}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.2",
    "ember-data": "2.6.2",
    "ember-template-compiler": "2.6.2"
  },
  "addons": {
  	"ember-stickler": "0.1.0-beta.2"
  }
}