Skip to content

Instantly share code, notes, and snippets.

@san650
Created July 15, 2016 17:48
Show Gist options
  • Select an option

  • Save san650/193054b620d0c93c44a2d99d240fe15d to your computer and use it in GitHub Desktop.

Select an option

Save san650/193054b620d0c93c44a2d99d240fe15d to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
const { computed } = Ember;
export default Ember.Component.extend({
tagName: 'form',
// Predicates
isProcessing: false,
// Computed
api: computed(function() {
return this;
}),
// Actions
submit() {
console.log('submit');
this.set('isProcessing', true);
this.get('on-submit')().finally(() => this.set('isProcessing', false));
return false;
}
});
import Ember from 'ember';
const { RSVP } = Ember;
function asyncOperation() {
return new RSVP.Promise(function(resolve) {
setTimeout(function() {
console.log('Done.');
resolve();
}, 3000);
});
}
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
authenticate() {
return asyncOperation();
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#ui-form on-submit=(action "authenticate") as |api|}}
<label>Name
<input required>
</label>
{{#if api.isProcessing}}
<button disabled>Processing...</button>
{{else}}
<button>Submit</button>
{{/if}}
{{/ui-form}}
{{outlet}}
<br>
<br>
{
"version": "0.10.1",
"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.6.0",
"ember-data": "2.6.1",
"ember-template-compiler": "2.6.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment