Skip to content

Instantly share code, notes, and snippets.

@luxzeitlos
Created December 11, 2019 14:53
Show Gist options
  • Save luxzeitlos/57ca6b111fb9fff87ef81d6d454ee7c4 to your computer and use it in GitHub Desktop.
Save luxzeitlos/57ca6b111fb9fff87ef81d6d454ee7c4 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
isSelected: Ember.computed('selectedDirs.[]', 'path', function() {
return this.get('selectedDirs')
.some(d => this.get('path').startsWith(d));
})
});
import Ember from 'ember';
export default Ember.Component.extend({
init() {
this._super(...arguments);
this.set('selectedDirs', []);
},
actions: {
toggle(elem) {
if(!this.get('selectedDirs').includes(elem)) {
this.set('selectedDirs', [elem, ...this.get('selectedDirs')]);
} else {
this.set('selectedDirs', this.get('selectedDirs').filter(x => x != elem));
}
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
tree: {
europe: {
germany: { berlin: {}, munich: {} },
france: { paris: {}, milano: {} }
},
africa: {}
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.dir {
margin: .25rem;
margin-left: 1rem;
border: 2px solid black;
padding: .25rem;
}
.dir.selected {
border-color: blue;
}
{{tree-root tree=tree}}
<div class="dir {{if isSelected 'selected'}}">
{{path}} <button onclick={{action toggle path}}>toggle</button>
{{#each-in this.elem as |name children|}}
{{tree-elem
path=(concat path name '/')
elem=children
selectedDirs=selectedDirs
toggle=toggle
}}
{{/each-in}}
</div>
Tree:
{{tree-elem
path="/"
elem=tree
selectedDirs=selectedDirs
toggle=(action 'toggle')
}}
Selected{{selectedDirs}}:
<ul>
{{#each selectedDirs as |dir|}}
<li>{{dir}}</li>
{{/each}}
</ul>
{
"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