Skip to content

Instantly share code, notes, and snippets.

@Frozenfire92
Last active July 18, 2018 21:34
Show Gist options
  • Save Frozenfire92/58e6b06cb4afb6278cbde6fec93094b0 to your computer and use it in GitHub Desktop.
Save Frozenfire92/58e6b06cb4afb6278cbde6fec93094b0 to your computer and use it in GitHub Desktop.
TestBug
import Component from '@ember/component';
import { observer, get, set, getWithDefault } from '@ember/object';
import { later } from '@ember/runloop';
export default Component.extend({
// Required:
// value - the currently selected option
// options - the available options,
// ['Canada', 'USA', 'Mexico']
// [{value: 'word-cloud', label: 'Word Cloud'}]
// Optional:
// disabled - boolean
// required - boolean
// multiple - boolean
// name - string
tagName: 'select',
attributeBindings: [
'disabled',
'required',
'multiple',
'name'
],
didReceiveAttrs() {
set(this, 'noDefault', (get(this, 'value') && !get(this, 'keys')) ? false : true);
},
didInsertElement() {
this.$().val(get(this, 'value') || '');
},
didRender() {
this.$().val(get(this, 'value'));
if (get(this, 'isUserRoles') && get(this, 'value') === '') {
set(this, 'value', get(this, 'originalRole'));
}
},
willDestroyElement() {
if (get(this, 'isUserRoles')) {
set(this, 'value', '');
}
},
// For when value changes
valueWatcher: observer('value', function() {
let propValue = get(this, 'value');
let elValue = this.$().val();
if (elValue !== propValue) {
this.$().val(propValue);
}
}),
// For when element changes
change() {
let oldValue = get(this, 'value');
let newValue = this.$().val();
if (oldValue !== newValue) {
set(this, 'value', newValue);
if (get(this, 'changeAction')) {
later(()=>get(this, 'changeAction')(), getWithDefault(this, 'changeDelay', 0));
}
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
dropdownOptions: ['thing', 'thing2'],
selectedOption: null
});
<h1>Welcome to {{appName}}</h1>
{{select-dropdown options=dropdownOptions value=selectedOption}}
<br>
<br>
{{outlet}}
<br>
<br>
{{#if noDefault}}
<option value=""></option>
{{/if}}
{{#if keys}}
{{#each options as |option|}}
<option value="{{get option keys.[1]}}">{{get option keys.[0]}}</option>
{{/each}}
{{else}}
{{#each options as |o|}}
{{#if o.label}}
<option value="{{o.value}}">{{o.label}}</option>
{{else}}
<option value="{{o}}">{{o}}</option>
{{/if}}
{{/each}}
{{/if}}
{
"version": "0.15.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "release",
"ember-template-compiler": "release",
"ember-testing": "release"
},
"addons": {
"ember-data": "3.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment