Skip to content

Instantly share code, notes, and snippets.

@deividkamui
Last active February 3, 2019 12:07
Show Gist options
  • Save deividkamui/3f2b0f9a95491e0d8d7ae0ac260ede64 to your computer and use it in GitHub Desktop.
Save deividkamui/3f2b0f9a95491e0d8d7ae0ac260ede64 to your computer and use it in GitHub Desktop.
Select OnChange Error
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
import SimpleItem from '../models/SimpleItem';
/**
* Model to simulate an AJAX CALL To retrieve all items
*
**/
export default Model.extend({
items: [],
isReady: false,
init(){
this.set('items', []);
this.set('isReady', false);
},
SetData(){
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
this.get('items').pushObject(SimpleItem.create({name: 'itemOne'}));
this.get('items').pushObject(SimpleItem.create({name: 'itemTwo'}));
this.get('items').pushObject(SimpleItem.create({name: 'itemThree'}));
this.set('isReady', true);
resolve();
}, 3000);
});
return promise;
}
});
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
export default Model.extend({
price: null,
name: null,
init(){
this.set('price', null);
this.set('name', null);
}
});
import EmberRouter from '@ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: 'none',
rootURL: config.rootURL
});
Router.map(function() {
this.route('myRoute');
});
export default Router;
import Ember from 'ember';
import MultipleItems from '../models/MultipleItems';
export default Ember.Route.extend({
model(){
let model = MultipleItems.create();
model.SetData();
return model;
},
actions: {
ComboChangeCaseOne(passItem, propertyToChange, selectedValue){
console.info(passItem, propertyToChange, selectedValue);
},
ComboChangeCaseTwo(passItem, propertyToChange, selectedValue, fullEvent){
console.info(passItem, propertyToChange, selectedValue, fullEvent);
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#link-to 'myRoute'}}Go To Demo{{/link-to}}
{{outlet}}
<br>
<br>
{{#if model.isReady}}
<h1>Selected Event Case One</h1>
{{#each model.items as |newItem|}}
<h3>{{newItem.name}}</h3>
<select onChange={{action 'ComboChangeCaseOne' newItem 'price' value='target.value'}}>
<option value="">Select an option</option>
<option value="1000">$1000</option>
<option value="100">$100</option>
<option value="10">$10</option>
</select>
{{/each}}
<h1>Selected Event Case Two</h1>
{{#each model.items as |newItem|}}
<h3>{{newItem.name}}</h3>
<select {{action 'ComboChangeCaseTwo' newItem 'price' value='target.value' on='change'}}>
<option value="">Select an option</option>
<option value="1000">$1000</option>
<option value="100">$100</option>
<option value="10">$10</option>
</select>
{{/each}}
{{else}}
<h1>Loading....</h1>
{{/if}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment