Skip to content

Instantly share code, notes, and snippets.

@mikegrassotti
Last active December 29, 2015 20:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mikegrassotti/0fcc977e342386d7e6b7 to your computer and use it in GitHub Desktop.
Save mikegrassotti/0fcc977e342386d7e6b7 to your computer and use it in GitHub Desktop.
forms
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'m-form',
data: {
name: 'blank',
age: 0
},
actions: {
bar() {
// your ajax method here..
console.log('bar');
const promise = new Ember.RSVP.Promise((resolve) => {
console.log('promising...');
setTimeout(resolve, 2000);
});
console.log('promise', promise);
return promise;
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#m-form model=data action=(action 'bar') as |f|}}
{{f.text-input field='name'}}
{{f.text-input field='age'}}
<input type="submit"/>
{{/m-form}}
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'form',
attributeBindings: ["novalidate", "method"],
method: "POST",
isProcessing: false,
submit: function(event) {
const model = this.get('model');
console.log('submix fx', model.name, model.age);
console.log('triggerFoo');
this.set('isProcessing', true);
const promise = Ember.RSVP.cast(this.action());
console.log('promise res', promise);
promise.finally(() => {
console.log('bye');
this.set('isProcessing', false);
});
return false;
},
actions: {
triggerFoo: function() {
},
fieldChanged: function(event) {
console.log('component change', event);
return false;
}
}
});
isProcessing: {{isProcessing}}
{{yield
(hash text-input=(component 'm-text-input'
model=model
whenChanged=(action 'fieldChanged'))
) }}
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
valueChanged: function(value) {
console.log('m-text-input changed', value);
this.get('whenChanged')(value);
}
}
});
<label>{{field}}</label>
{{input placeholder=field value=(mut (get model field)) change=(action 'valueChanged' (get model field))}}
={{get model field}}
<span class="error">{{get errors field}}</span>
{
"version": "0.4.17",
"EmberENV": {
"FEATURES": {}
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "canary",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
"ember-template-compiler": "canary"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment