Ember-stickler-sample

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  init() {
    this.transitionToRoute('my-route-details')
  }
});

form-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    submit() {
      return this.sendAction('action');
    }
  }
});

form-component.template.hbs

{{#validated-form as |form|}}
  {{yield
    (
      hash
      firstname=(
      	component 'input-first-name' form=form
      )
      state= form.state
      action=(action form.submit)
    )
  }}
{{/validated-form}}

input-field-component.component.js

import Ember from 'ember';

const { TextField } = Ember;

export default TextField.extend({
  init() {
    this._super(...arguments);
    if (this.value) {
      this.attrs.action(this.value);
    }
  },
  focusOut(e) {
    this.attrs.action(e.target.value);
  },
  input() {
    this.attrs.action(e.target.value);
  }
});

input-field-component.template.hbs

{{yield}}

input-first-name.component.js

import Ember from 'ember';

export default Ember.Component.extend();

input-first-name.template.hbs

{{#form.validation
    existsMessage= "Please enter your first name"
    minLength=8
    rules= "exists" as |validation|}}
first name::{{value}}
<br />
    {{input-field-component
       value= value
       action =(action validation.validate (mut value))
     }}
    <br />
    {{#if validation.errors}}
      <p class="red">
         {{first validation.errors}}
       </p>
    {{/if}}
{{/form.validation}}

my-route-details.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    submitForm() {
      this.transitionToRoute('my-route-fun')
    }
  }
});

my-route-details.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      firstname: 'ads'
    }; 
  }
});

my-route-details.template.hbs

<h3>My route details </h3>
{{#form-component  
	action=(action 'submitForm')
  as |form|}}
	{{form.firstname value=model.firstname}}
  <button {{action form.action}}>hello</button>
{{/form-component}}

my-route-fun.route.js

import Ember from 'ember';

export default Ember.Route.extend({
});

my-route-fun.template.hbs

adfaf
{{#link-to "my-route-details" }}Back{{/link-to}}

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('my-route-details');
  this.route('my-route-fun');
});

export default Router;

templates.application.hbs

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

{{outlet}}
<br>
<br>

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