Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save davelindquist-egistix/c23ab7ec0fb3e6818103bfe09fb3d4a3 to your computer and use it in GitHub Desktop.
Save davelindquist-egistix/c23ab7ec0fb3e6818103bfe09fb3d4a3 to your computer and use it in GitHub Desktop.
Ember Power Select belongsTo Async Issue
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class extends Component {
@tracked log;
@service store;
@tracked record;
options = [
{ othername: "A" },
{ othername: "B" },
{ othername: "C" },
{ othername: "D" }
];
constructor() {
super(...arguments);
this.options = this.store.findAll('dummyrelationship');
this.record = this.store.findRecord('dummy',1);
};
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
constructor() {
super(...arguments);
$.mockjax({
url: '/dummies/1',
responseTime: 100,
responseText: {
data: {
type: "dummy",
id: 1,
attributes: {
"name": "Bob"
},
relationships: {
other: {
data: {
type: "dummyrelationship",
id: 2
}
}
}
}
}
});
$.mockjax({
url: '/dummyrelationships/2',
responseTime: 5000,
responseText: {
data: {
type: "dummyrelationship",
id: 2,
attributes: {
"othername": "Other"
}
}
}
});
$.mockjax({
url: '/dummyrelationships',
responseTime: 0,
responseText: {
data: [{
type: "dummyrelationship",
id: 2,
attributes: {
"othername": "Other"
}
},{
type: "dummyrelationship",
id: 33,
attributes: {
"othername": "ThirtyThree"
}
},{
type: "dummyrelationship",
id: 44,
attributes: {
"othername": "FourtyFour"
}
}]
}
});
}
}
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo } from 'ember-data/relationships';
export default class extends Model {
@attr("string") name
@belongsTo('dummyrelationship') other
}
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
//import { belongsTo, hasMany } from 'ember-data/relationships';
export default class extends Model {
@attr("string") othername
}
{{ember-power-select-async-property}}
<h1>Testing Ember Power Select</h1>
<h3>with async selected value (belongsTo relationship)</h3>
{{#if record}}
<table>
<tr>
<td>Name:</td>
<td>{{record.name}}</td>
<td>(immediate)</td>
</tr>
<tr>
<td>Related:</td>
<td>{{record.other.othername}}</td>
<td>(5s load delay)</td>
</tr>
<tr>
<td>Picker:</td>
<td>
{{#power-select-typeahead options=options selected=record.other onChange=(action (mut record.other)) as |thing|}}
{{thing.othername}}
{{/power-select-typeahead}}
</td>
<td>(5s load delay)</td>
</tr>
</table>
{{/if}}
{
"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/1.11.3/jquery.js",
"ember": "3.12.2",
"ember-template-compiler": "3.12.2",
"ember-testing": "3.12.2",
"ember-power-select": "3.0.6",
"ember-power-select-typeahead": "0.8.0",
"jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js"
},
"addons": {
"@glimmer/component": "1.0.0",
"ember-data": "3.12.5",
"ember-power-select": "1.10.4",
"ember-power-select-typeahead": "0.6.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment