@miguelcamba
@cibernox
miguelcamba.com
To use again, especially after salvaging or special treatment or processing.
(rē-yo͞oz′)
tr.v.
{{select options=options}}
{{select options=options selected=foo}}
{{select options=list
selected=foo
onchange=(action "didChoose")}}
{{select options=list
selected=foo
onchange=(action (mut foo))}}
{{my-component
options=list
optionLabelPath="foo"
optionValuePath="bar"
delay=300
inputWidth=200
language="en-US"
onFooBar="sendEmail"
boxColor=...
highlight=...
ajaxAdapter=...
initSelection=...
identityMap=...
refreshOnHover=...}}
2x if mandatory
{{#each users as |user|}}
{{user.name}}
{{else}}
<p>No matching results</p>
{{/each}}
{{#select options=users selected=foo as |user|}}
{{user.name}}
{{else}}
<p>No matching results</p>
{{/select}}
<div class="trigger" onclick={{action "toggle"}}>
{{yield selected}}
</div>
{{#if opened}}
<div class="dropdown-content">
{{yield}}
</div>
{{/if}}
actions: {
toggle() {
this.get('opened') ? this.close() : this.open();
}
},
open() {
this.set('opened', true);
this.addClickHandlerToBody();
},
close() {
this.set('opened', false);
this.removeClickHandlerFromBody();
}
{{#dropdown}}
{{#each options as |option|}}
{{yield option}}
{{else}}
{{yield to="inverse"}}
{{/each}}
{{else}}
{{yield selected}}
{{/dropdown}}
{{#select options=list selected=selected as |opt|}}
{{option}}
{{else}}
<p>No results</p>
{{/select}}
<div class="trigger" onclick={{action "toggle"}}>
{{yield selected}}
</div>
{{#if opened}}
{{#ember-wormhole to=destinationElmnt}}
<div class="dropdown-content">
{{yield}}
</div>
{{/ember-wormhole}}
{{/if}}
actions: {
toggle() { }
},
open() {
// ...
this.listenToResizeScrollAndOrientationEvents();
run.schedule('afterRender', this, this.reposition);
},
reposition() {
// Calculate coordinates
}
contentFor: function(type) {
if (type === 'body-footer') {
return '<div id="dropdown-wormhole"></div>';
}
}
{{#select options=list selected=selected as |opt|}}
{{option}}
{{else}}
<p>No results</p>
{{/select}}
{{#dropdown}}
<ul class="select-options">
{{#each results as |opt|}}
<li class="select-option {{selected}} {{highlighted}}"
onclick={{action "select" opt}}
onmouseover={{action "highlight" opt}}>
{{yield opt}}
</li>
{{/each}}
</ul>
{{else}}
...
{{/dropdown}}
{{my-foo onFoo="didFoo"}}
let reply = this.get('onFoo')(someArg);
this.sendAction('onFoo', someArg);
{{my-foo onFoo=(action "didFoo")}}
😱
<div class="trigger" onclick={{action "toggle"}}>
{{yield selected}}
</div>
{{#if opened}}
{{#ember-wormhole to=destinationElmnt}}
<div class="dropdown-content">
</div>
{{/ember-wormhole}}
{{/if}}
{{yield}}
{{yield (action "close")}}
{{#dropdown}}
<ul class="select-options">
{{#each results as |opt|}}
<li class="select-option {{selected}} {{highlighted}}"
onclick={{action "select" opt}}
onmouseover={{action "highlight" opt}}>
{{yield opt}}
</li>
{{/each}}
</ul>
{{else}}
...
{{/dropdown}}
{{#dropdown}}
onclick={{action "select" opt}}
{{#dropdown as |closeDropdown|}}
onclick={{action "select" opt closeDropdown}}
export default Ember.Component.extend({
actions: {
select(selection, closeDropdown, evt) {
// do stuff ...
closeDropdown(); // ... and close :-P
}
}
});
select(selection, closeDropdown, evt) {
// do stuff ...
closeDropdown(); // ... and close :-P
}
select(selection, closeDropdown, evt) {
// do stuff ...
this.onchange(selection, closeDropdown);
}
{{yield (action "close")}}
{{yield this}}
🚫
DANGER
// helpers/hash.js
import Ember from 'ember';
export default Ember.Helper.helper((_, hash) => hash);
{{yield (hash
close=(action "close")
open=(action "open")
isOpen=opened)}}
Comming in 2.3, but polyfillable now:
{{#dropdown}}
<ul class="select-options">
{{#each results as |opt|}}
<li class="select-option {{selected}} {{highlighted}}"
onclick={{action "select" opt}}
onmouseover={{action "highlight" opt}}>
{{yield opt}}
</li>
{{/each}}
</ul>
{{else}}
...
{{/dropdown}}
{{#dropdown}}
onclick={{action "select" opt}}
{{#dropdown as |dropdown|}}
onclick={{action "select" opt dropdown}}
export default Ember.Component.extend({
actions: {
select(selection, dropdown, evt) {
// ...
dropdown.close();
}
}
});
{{#dropdown as |dropdown|}}
<ul class="select-options">
{{#component optionsComponent
options=results
selected=selected
select=(action "select")
highlight=(action "highlight")
dropdown=dropdown as |opt|}}
{{yield opt}}
{{/component}}
</ul>
{{else}}
{{component selectedComponent selected=selected}}
{{/dropdown}}
{{#component optionsComponent
options=results
selected=selected
select=(action "select")
highlight=(action "highlight")
dropdown=dropdown as |opt|}}
{{yield opt}}
{{/component}}
{{component selectedComponent selected=selected}}
{{#select options=list
selected=selected as |opt|}}
{{option}}
{{else}}
<p>No results</p>
{{/select}}
{{#select options=list
selected=selected
optionsComponent="animated-opts" as |opt|}}
{{option}}
{{else}}
<p>No results</p>
{{/select}}