Skip to content

Instantly share code, notes, and snippets.

@patocallaghan
Last active March 2, 2022 12:20
Show Gist options
  • Save patocallaghan/92a5ae40bdce7b4cc8e4892be8769579 to your computer and use it in GitHub Desktop.
Save patocallaghan/92a5ae40bdce7b4cc8e4892be8769579 to your computer and use it in GitHub Desktop.
Classic Ember
import Component from '@ember/component';
export default Component.extend({
actions: {
updateLastName(event) {
this.set('lastName', event.target.value);
}
}
});
import Component from '@ember/component';
export default Component.extend({
classNames: ["one", "two", "three"],
//tagName: 'span',
// Set some data attributes
//'data-internal-attribute': true,
//attributeBindings: ['data-internal-attribute'],
// Event Handlers
// mouseDown(event) {
// console.log('mouseDown');
// },
// click(event) {
// console.log('click', event.target.tagName);
// },
// mouseUp(event) {
// console.log('mouseUp');
// },
// in-built jquery
// didInsertElement() {
// console.log(this.$().html());
// },
});
import Component from '@ember/component';
/*
LIFECYCLE HOOKS
* init
* didInsertElement
* willRender
* didRender
* didUpdateAttrs
* didReceiveAttrs
* willUpdate
* didUpdate
* willDestroyElement
* willClearRender
* didDestroyElement
1. Initialising
2. Updating
3. Destroying
*/
export default Component.extend({
init() {
this._super(...arguments);
console.log('init');
},
didInsertElement() {
this._super(...arguments);
this.$('input').focus();
console.log('didInsertElement');
},
didRender() {
this._super(...arguments);
console.log('didRender');
},
didReceiveAttrs() {
this._super(...arguments);
console.log('didReceiveAttrs');
},
willUpdate() {
this._super(...arguments);
console.log('willUpdate');
},
didUpdate() {
this._super(...arguments);
console.log('didUpdate');
},
willClearRender() {
this._super(...arguments);
console.log('willClearRender');
},
willDestroyElement() {
this._super(...arguments);
console.log('willDestroyElement');
},
didDestroyElement() {
this._super(...arguments);
console.log('didDestroyElement');
},
});
import Controller from '@ember/controller';
import { action } from '@ember/object';
/* ============================== */
export default Controller.extend({
showLifecycleComponent: false,
showHtmlDemoComponent: false,
showDataFlowComponent: false,
actions: {
updateFirstName(event) {
this.set('model.firstName', event.target.value);
},
updateLastName(event) {
this.set('model.lastName', event.target.value);
},
toggleComponent(property) {
this.toggleProperty(property);
}
}
});
import EmberObject, { computed } from '@ember/object';
export default EmberObject.extend({
firstName: '',
lastName: '',
fullName: computed('firstName', 'lastName', function() {
return `${this.firstName} ${this.get('lastName')}`;
}),
}).reopenClass({
someFunction() {
console.log('Called from User');
}
});
/**
EmberObject
* computed - push based reactivity. needs dependent keys vs getters
* Object.create() vs new Object()
* init vs constructor
* reopenClass vs static
**/
import Route from '@ember/routing/route';
import EmberObject, { computed } from '@ember/object';
const User = EmberObject.extend({
init() {
this._super(...arguments);
console.log('USER INIT', ...arguments);
},
firstName: '',
lastName: '',
fullName: computed('firstName', function() {
return `${this.firstName} ${this.get('lastName')}`;
}),
}).reopenClass({
someFunction() {
console.log('Called from User');
}
});
export default Route.extend({
model() {
// reopenClass function
User.someFunction();
return User.create({
firstName: 'Travis',
lastName: 'Bickle'
});
}
});
<h1>Classic Ember</h1>
<label>
First name
<input
type="text"
value={{this.model.firstName}}
oninput={{action "updateFirstName"}}
/>
</label>
<label>
Last name
<input
type="text"
value={{this.model.lastName}}
oninput={{action "updateLastName"}}
/>
</label>
<hr>
User first name: {{this.model.firstName}}<br>
User last name: {{this.model.lastName}}<br>
User full name: {{this.model.fullName}}<br>
<hr>
<label>
Show lifecycle component
<input
type="checkbox"
{{action "toggleComponent" "showLifecycleComponent"}}
checked={{this.showLifecycleComponent}}
/>
</label>
<br>
{{#if this.showLifecycleComponent}}
<LifecycleHooks
@firstName={{this.model.firstName}}
@lastName={{this.model.lastName}}
/>
{{/if}}
<hr>
<label>
Show html component
<input
type="checkbox"
{{action "toggleComponent" "showHtmlDemoComponent"}}
checked={{this.showHtmlDemoComponent}}
/>
</label>
<br>
{{#if this.showHtmlDemoComponent}}
<hr>
<HtmlDemo
class="four"
data-external-attribute
/>
{{/if}}
<hr>
<label>
Show data flow component
<input
type="checkbox"
{{action "toggleComponent" "showDataFlowComponent"}}
checked={{this.showDataFlowComponent}}
/>
</label>
<br>
{{#if this.showDataFlowComponent}}
<hr>
<DataFlow
@lastName={{this.model.lastName}}
/>
{{/if}}
{{!--
* Non-Namespaced arguments
* One way data-flow
* local copy
--}}
<h2>Data flow component</h2>
First name: {{this.firstName}}<br>
First name dupe: {{firstName}}<br>
Last name: {{@lastName}}<br>
<br>
<label>
Two-way binding data flow
<input
type="text"
value={{this.lastName}}
oninput={{action "updateLastName"}}
/>
</label>
<h2>Html demo</h2>
<button>Click me</button>
<h2>Lifecycle hooks</h2>
<input />
{
"version": "0.17.1",
"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.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment