Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Yielded Nested Checkboxes
import Component from '@glimmer/component';
export default class extends Component {
isIndeterminate = true;
toggleChildCheckbox(foo) {
this.toggleCheckbox(foo)
}
}
import Component from '@glimmer/component';
export default class extends Component {
}
import Component from '@glimmer/component';
export default class extends Component {
toggleCheckbox(itemName) {
console.log(itemName)
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Yielded Nested Checkboxes';
}
import { modifier } from 'ember-modifier';
export default modifier((element, [isIndeterminate]) => {
element.indeterminate = isIndeterminate;
});
<h1>{{this.appName}}</h1>
<br>
<br>
<Wrapper />
<br>
<br>
{{outlet}}
<br>
<br>
<li>
<input
id={{@name}}
type="checkbox"
checked={{@checked}}
onchange={{fn @toggleCheckbox @name}}
name={{@name}}
{{set-indeterminate this.isIndeterminate}}
>
<label for={{@name}}>{{@label}}</label>
{{yield (hash nestedCheckboxes=(component 'nested-checkboxes' toggleCheckbox=this.toggleChildCheckbox))}}
</li>
<ol>
{{yield (hash checkbox=(component 'checkbox' toggleCheckbox=@toggleCheckbox))}}
</ol>
<NestedCheckboxes @toggleCheckbox={{this.toggleCheckbox}} as |checkboxes|>
<checkboxes.checkbox
@checked={{true}}
@label="Foo"
@name="foo"
/>
<checkboxes.checkbox
@checked={{false}}
@label="Bar"
@name="bar"
as |bar|
>
<bar.nestedCheckboxes as |barCheckboxes|>
<barCheckboxes.checkbox
@checked={{true}}
@label="Foobar"
@name="foobar"
/>
<barCheckboxes.checkbox
@checked={{true}}
@label="BarBaz"
@name="barbaz"
/>
<h3>Third</h3>
<h6>Rob</h6>
...
</bar.nestedCheckboxes>
</checkboxes.checkbox>
<checkboxes.checkbox
@checked={{true}}
@label="Baz"
@name="baz"
/>
</NestedCheckboxes>
{
"version": "0.17.1",
"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/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0",
"ember-modifier": "1.0.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.