Skip to content

Instantly share code, notes, and snippets.

@xomaczar
Created August 16, 2017 02:22
Show Gist options
  • Save xomaczar/302ac612ba08293184a09c452ef0d8e0 to your computer and use it in GitHub Desktop.
Save xomaczar/302ac612ba08293184a09c452ef0d8e0 to your computer and use it in GitHub Desktop.
Filter with observable helpers
import Ember from 'ember';
const { Controller, A: emberArray } = Ember;
export default Controller.extend({
appName: 'Ember Twiddle',
actions: {
selectState(stateID) {
this.set('matchedFilters', [stateID]);
this.get('matchedFiltersStable').pushObject(stateID);
}
},
init() {
this._super(...arguments);
this.matchedFilters = emberArray([]);
this.matchedFiltersStable = emberArray([]);
this.states = [{
id: '1',
name: 'Tennessee',
}, {
id: '2',
name: 'Florida',
}, {
id: '3',
name: 'Georgia',
}];
}
});
import Ember from 'ember';
const { set, get, Helper, observer } = Ember;
export default Helper.extend({
compute([selected, array = []]) {
set(this, 'selected', selected);
set(this, 'array', array);
return get(this, 'array').indexOf(get(this, 'selected')) >= 0;
},
arrayContentDidChange: observer('array.[]', function() {
this.recompute();
})
});
import Ember from 'ember';
export function isSelected(params/*, hash*/) {
let selected = params[0];
let options = params[1];
return options.indexOf(selected) >= 0;;
}
export default Ember.Helper.helper(isSelected);
<h1>Handlebar helper not executing on input change</h1>
<br>
<br>
<h2> With dumb helper - w/o observing </h2>
<select onchange={{action "selectState" value="target.value"}}>
{{#each states as |s|}}
<option value={{s.id}} disabled={{is-selected s.id matchedFilters}}>{{s.name}}</option>
{{/each}}
</select>
<h2> With smart helper - observe array changes</h2>
<select onchange={{action "selectState" value="target.value"}}>
{{#each states as |s|}}
<option value={{s.id}} disabled={{is-selected-smart s.id matchedFiltersStable}}>
{{s.name}}
</option>
{{/each}}
</select>
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment