Skip to content

Instantly share code, notes, and snippets.

@e00dan
Forked from joeltrew/application.controller.js
Last active February 7, 2017 11:04
Show Gist options
  • Save e00dan/bd660a1a4a9e766ddbb0 to your computer and use it in GitHub Desktop.
Save e00dan/bd660a1a4a9e766ddbb0 to your computer and use it in GitHub Desktop.
rescursive component
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle',
tree: {
value1: 234,
valueOptions: {
subOption1: 123,
subOption2: 133,
subOption3: 7432,
valueOptions2: {
subSubOption4: 821
}
}
}
});
subOption1 value: <b>{{tree.valueOptions.subOption1}}</b>
<hr/>
value1: <b>{{tree.value1}}</b>
<ul>{{tree-branch node=tree}}</ul>
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'li',
classNames: ['branch'],
items: function() {
var node = this.get('node')
var keys = Object.keys(node);
return keys.filter(function(key) {
return node[key].constructor !== Object
}).map(function(key){
return { key: key, value: node[key]};
})
}.property('node'),
children : function() {
var node = this.get('node');
var children = [];
var keys = Object.keys(node);
var branchObjectKeys = keys.filter(function(key) {
return node[key].constructor === Object
})
branchObjectKeys.forEach(function(keys) {
children.push(keys)
})
children = children.map(function(key) {
return {name:key, value: node[key]}
})
return children
}.property('node'),
actions: {
save(item) {
let node = this.get('node');
if (!node || !node.hasOwnProperty(item.key)) {
return false;
}
Ember.set(node, item.key, item.value);
}
}
});
{{#each children as |child|}}
{{child.name}}
{{tree-node node=child.value}}
{{/each}}
{{#each items as |item|}}
<li>{{input value=item.key}} : {{input value=item.value}} <button {{action 'save' item}}>Save</button></li>
{{/each}}
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'ul',
classNames: ['node']
});
{{tree-branch node=node}}
{
"version": "0.4.16",
"EmberENV": {
"FEATURES": {}
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment