Skip to content

Instantly share code, notes, and snippets.

@HenryVonfire
Last active October 1, 2018 11:51
Show Gist options
  • Save HenryVonfire/2d5e4dec23dce871a978e67b4f136ab2 to your computer and use it in GitHub Desktop.
Save HenryVonfire/2d5e4dec23dce871a978e67b4f136ab2 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
items:[
{id:1, label: "project1", isExpanded: false, children: [
{label: "unit1"},
{label: "unit2"},
{label: "unit3"}
]},
{id:2, label: "project2", isExpanded: false, children: []},
{id:3, label: "project3", isExpanded: false, children: [
{label: "unit1"}
]},
],
actions: {
expand(id) {
this.items.forEach(item => {
if(item.id === id) {
Ember.set(item, "isExpanded", !item.isExpanded);
}
});
},
check() {
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames:["header-treeview"]
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.header-treeview{
color: white;
background-color: lightblue;
}
.header-treeview>div {
display:inline-block;
padding: 5px;
}
.header-treeview__checkbox {
border-right:1px solid white;
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{checkbox-treeview}}
<br>
<br>
{{#each items as |item|}}
{{header-treeview
item=item
expand=(action "expand")
check=(action "check")
}}
{{#if item.isExpanded}}
{{#each item.children as |child|}}
<input type="checkbox" value="Bike"> {{child.label}}<br>
{{/each}}
{{/if}}
{{/each}}
<div class="header-treeview__checkbox"><input type="checkbox" value="Bike"></div>
<div class="header-treeview__label" {{action expand item.id}}>{{item.label}} {{if item.isExpanded "^" "v"}}</div>
{
"version": "0.15.0",
"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.2.2",
"ember-template-compiler": "3.2.2",
"ember-testing": "3.2.2"
},
"addons": {
"ember-data": "3.2.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment