Ember 可编辑递归嵌套组件答案

【问题标题】：Ember editable recursive nested componentsEmber 可编辑递归嵌套组件
【发布时间】：2016-02-16 08:48:50
【问题描述】：

我目前正在尝试构建一个可以接受这样的模型的组件

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

任何对我如何使这项工作有任何想法的人都会提供很大帮助，谢谢！

【问题讨论】：

你有机会发布一个工作的 jsbin 吗？
是的，这里是ember-twiddle.com/b7f8fa6b4c4336d40982
你所说的“节省”是什么意思？你想把它保存为 Ember Data 模型还是什么？
目前我有数据作为 Ember 数据模型传递，但每个组件只占用模型的一部分（子对象），所以是的，我的问题是如何将更改后的子对象保存回模型。

标签： ember.js components

【解决方案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.

【讨论】：

是否可以一次保存所有更改，而不是单独保存操作？

【解决方案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 中阅读有关操作的更多信息。

【讨论】：