Эмбер редактируемые рекурсивные вложенные компоненты

Question

В настоящее время я пытаюсь создать компонент, который будет принимать модель как этот

 "values": { 
     "value1": 234, 
     "valueOptions": { 
      "subOption1": 123, 
      "subOption2": 133, 
      "subOption3": 7432, 
      "valueOptions2": { 
      "subSubOption4": 821 
      } 
     } 
     } 

с каждым объектом рекурсивно создает новый компонент. Пока я создал этот компонент ветви и узла, и он отлично подходит для получения данных и их отображения, но проблема, с которой я сталкиваюсь, заключается в том, как я могу редактировать и сохранять данные. Каждый компонент имеет другой набор данных, поскольку он передается по его собственному дочернему объекту.

Js поворачивающих здесь: шаблон компонента https://ember-twiddle.com/b7f8fa6b4c4336d40982

дерево-ветви:

{{#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}} 

дерево-ветви контроллер компонента:

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: function(item) { 
      console.log(item.key, item.value); 
     } 
    } 

}); Компонент

дерево-узел:

{{tree-branch node=node}} 

Любой, кто имеет какие-либо идеи о том, как я могу получить эту работу будет серьезным подспорьем, спасибо!

Answer 1

Использование:

save(item) { 
    let node = this.get('node'); 

    if (!node || !node.hasOwnProperty(item.key)) { 
     return; 
    } 

    Ember.set(node, item.key, item.value); 
} 

See working demo.

Answer 2

Я думаю, что это было бы идеальным местом для использования помощника действий:

В контроллере определяют действие:

//controller 
actions: { 
    save: function() { 
     this.get('tree').save(); 
    } 
} 

а затем передать его в ваш компонент:

{{tree-branch node=tree save=(action 'save')}} 

Вы затем передать это же действие вниз в {{tree-branch}} и {{tree-node}} и вызвать его так:

this.attrs.save(); 

Вы можете прочитать больше о действиях в 2,0 here и here.