Skip to content

Instantly share code, notes, and snippets.

@teejayhh
Forked from Techn1x/components.my-component\.js
Last active April 17, 2020 01:30
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 teejayhh/5885c04230cf5f4acc567f9c3b371109 to your computer and use it in GitHub Desktop.
Save teejayhh/5885c04230cf5f4acc567f9c3b371109 to your computer and use it in GitHub Desktop.
New Twiddle
import Component from '@ember/component';
import { computed, set } from '@ember/object';
export default Component.extend({
currentDateInternal: null,
currentTimeInternal: null,
init(...args) {
this._super(...args)
if (!this.currentTime) set(this, 'currentTime', moment().format('hh:mm:ss'))
if (!this.currentDate) set(this, 'currentDate', moment().format('YYYY-MM-SS'))
},
currentDate: computed('currentDateInternal', {
get(_key) {
return this.currentDateInternal
},
set(_key, value) {
set(this, 'currentDateInternal', value)
return value
},
}),
currentTime: computed('currentTimeInternal', {
get(_key) {
return this.currentTimeInternal
},
set(_key, value) {
return set(this, 'currentTimeInternal', value)
},
}),
actions: {
changedatetime() {
set(this, 'currentTime','x:x:x');
set(this, 'currentDate', 'y-y-y');
},
submit() {
const currentDate = this.currentDate;
const currentTime = this.currentTime;
this.callbackAction(currentDate, currentTime);
},
},
})
import Controller from '@ember/controller';
import { set } from '@ember/object';
export default Controller.extend({
currentDate: '1900-01-01',
currentTime: '01-01-01',
actions: {
submitAction(date, time) {
set(this, 'currentDate', date);
set(this, 'currentTime', time);
}
}
})
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
controller date time: {{currentDate}} {{currentTime}}
{{my-component currentDate=currentDate currentTime=currentTime callbackAction=(action "submitAction")}}
<br>
<br>
component date time: {{currentDate}} {{currentTime}}
<button onClick={{action "changedatetime"}}>change component datetime</button>
<button onClick={{action "submit"}}>submit</button>
{
"version": "0.17.0",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.12.2",
"ember-template-compiler": "3.12.2",
"ember-testing": "3.12.2"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment