灰烬编辑递归嵌套组件

我目前正在试图建立将接受一个模型这样灰烬编辑递归嵌套组件

 "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}}

任何人谁拥有我怎么能得到这个工作将是一个重大的帮助，任何想法，谢谢！

来源

2015-11-15 J T

你有可能发布一个正在运行的jsbin吗？ – NicholasJohn16

是的，这是https://ember-twiddle.com/b7f8fa6b4c4336d40982 –

你是什么意思的'保存'？你想将它保存为Ember Data模型还是什么？ –

用途：

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

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

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

See working demo.

来源

2015-11-15 14:50:11

谢谢！我没有意识到Ember.set是一件事，欢呼 –

无论如何要立即保存所有的变化，而不是单独保存行动？ –

我认为这将是使用动作助手完美的地方：

在你的控制器定义操作：

//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阅读更多有关行动。

来源

2015-11-16 00:07:30 NicholasJohn16

灰烬编辑递归嵌套组件

回答

相关问题