Skip to content

Instantly share code, notes, and snippets.

View nightire's full-sized avatar
Looking for new opportunities

余凡 nightire

Looking for new opportunities
View GitHub Profile
@nightire
nightire / component.hbs
Created September 5, 2021 03:31
Example
{{#if @searchKeyword}}
<div class="p-4 text-gray-600">
{{~t "tasks.searching-on" keyword=@searchKeyword~}}
</div>
{{/if}}
<div
class="divide-gray-200 divide-y"
role="list"
{{navigatable "[role=listitem]"}}
import { Promise, defer } from 'rsvp';
import { get } from '@ember/object';
// a mock API response used below
const MOCK_PAYLOAD = {
person: {
id: '1',
name: 'Chris',
age: 33,
father: {
@nightire
nightire / components.tooltip\.js
Last active May 23, 2020 14:41
tooltip-modifier
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked container;
constructor(owner, args) {
super(owner, args);
this.container = this.createContainerElement();
}
@nightire
nightire / controllers.application\.js
Last active May 23, 2020 13:05
Recreate vs Rerender
import Controller from '@ember/controller';
import { action, set } from '@ember/object';
import { tracked } from 'tracked-built-ins';
export default class ApplicationController extends Controller {
@tracked items = [
{ id: 1, value: 1 },
{ id: 2, value: 2 },
{ id: 3, value: 3 },
];
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked tags = ['programming', 'rails'];
@tracked tag = '';
@action addTag(event) {
@nightire
nightire / components.classic-search\.js
Last active May 4, 2020 16:09
Compare filtering items
import Component from '@ember/component';
import { computed } from '@ember/object';
export default class extends Component {
query = '';
@computed('query') get _options() {
if (this.query) {
return this.options.filter((option) => {
return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
import Ember from 'ember';
const { Component, computed } = Ember;
const BlogPostCardComponent = Component.extend({
classNames: ['blog-post-card', 'card'],
classNameBindings: ['disabled::clickable'],
click() {
if (!this.get('disabled')) {
this.get('viewPost')(this.get('post'));
@nightire
nightire / controllers.application\.js
Last active April 20, 2020 07:41
passing @query into component
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
queryParams = [
'page'
];
@tracked page;
@nightire
nightire / components.change-password\.js
Last active May 22, 2020 04:41
Octane way of changing password
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
const MESSAGES = {
staled: 'The old password and new password are the same. The password was not changed.',
invalid: 'The new password and confirm password must be the same value. The password was not changed.'
};
export default class extends Component {
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ChangePasswordForm extends Component {
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;