New Twiddle

application.js

import Ember from 'ember';

export default Ember.Route.extend({
    
    actions: {
        saveClient: function() {
            var model = this.modelFor('clients/show');
            model.save().then(()=> {
                this.transitionTo('clients');
            });
        }
    }
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
    positionalParams: ['model', 'label']
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  onInit: Ember.on('init', function(){
        this.set('model', Ember.create({
        	name: 'initialname',
          email: 'initialemail'
        }));
    })
});

templates.application.hbs

<div class="row">{{log model}}
    <div class="col-md-6">
        <form class="form-horizontal">
            {{my-component model.name "Name"}}
            {{my-component model.email "Email"}}
            <div class="text-right">
                <button class="btn btn-primary" {{action 'saveClient'}}>Save</button>   
            </div>
        </form>
    </div>
</div>
{{model.name}}
{{model.email}}

templates.components.my-component.hbs

<div class="form-group">
    <label class="col-sm-2 control-label">{{label}}</label>
    <div class="col-sm-10">
        {{input value=attrs.model type="text" class="form-control" placeholder=placeholder}}
    </div>
</div>

twiddle.json

{
  "version": "0.4.6",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "http://builds.emberjs.com/tags/v1.13.7/ember.debug.js",
    "ember-data": "http://builds.emberjs.com/tags/v1.13.7/ember-data.js",
    "ember-template-compiler": "http://builds.emberjs.com/tags/v1.13.7/ember-template-compiler.js"
  }
}