Ember parent 组件中的数据更改未反映在 UI 上

Question

我有一个 parent 组件，它有一个手风琴面板（具有 multiple/dynamic 行数）

{{#my-accordion accordionPanels=accordionPanels as |accordion| }}
{{my-details-row section=accordion.props.section removeRow='removeRow'}}
{{/my-accordion}}

对应的JS如下;

accordionPanels: function() {
    var accordionPanels = [];
    var self = this;
    var myRows = this.get('section').myRows;
    myRows.forEach(function(myRow) {
        accordionPanels.pushObject({
            panel: {
                name: myRow.rowId,
                props: {
                    section: myRow
                }
            }
        });
    });

    return accordionPanels;
}.property('section.myRows'),

actions: {
    removeRow: function(row){
        var numberContainers = this.get('section').myRows.length;
        for (var i = 0; i < numberContainers; i++){
            if(this.get('section').myRows.contains(row.name)){
                console.log("row found!");
                this.get('section').myRows.removeObject(row.name);
            }
        }
    },
}

child组件(my-details-row)代码如下

actions: {
    removeRow: function(row){
        this.sendAction('removeRow', row);
    }
}

child hbs 如下;

<div class="dataBlockItem">
    {{my-field field=(field-from-section section "SECTION_NAME" "FIELD_NAME") }}
</div>  
{{my-button label="Remove" action="removeRow"}}

现在，当单击“删除”按钮时，我希望删除相应的行。虽然我确实在 parent 中获得了操作（从 child 传递），即使在执行

行之后

this.get('section').myRows.removeObject(row.name);

UI 未更新（即 parent 中的数据更改未反映在 child 组件中）

我需要写额外的 code/logic 才能反映 UI 上的变化吗？

Answer 1

你走在正确的轨道上。您应该能够使用闭包操作来帮助简化 parent 和 child 组件操作的连接。请参阅下面的代码和一个非常基本的示例 Ember Twiddle 在下面的 link。此外，您可能已经看到了这一点，但为了以防万一，这里有一个 link 到 Ember.js 指南，它提供了对组件操作的解释。 Ember Component Actions -version 2.15

Parent component.hbs

{{#my-accordion accordionPanels=accordionPanels as |accordion| }}
  {{my-details-row section=accordion.props.section removeRow=(action 'removeRow' accordion)}}
{{/my-accordion}}

Parent component.js

--这里可以通过简单地传递行 object 本身来删除行 .removedObject(row)

actions: {
  removeRow: function(row){
    var numberContainers = this.get('section.myRows').length;
    for (var i = 0; i < numberContainers; i++){
      if(this.get('section.myRows').includes(row.name)){
        console.log("row found!");
        this.get('section.myRows').removeObject(row);
      }
    }
  },
}

Child component.hbs

--这里将removeRow动作绑定到按钮组件的点击事件

<div class="dataBlockItem">
    {{my-field field=(field-from-section section "SECTION_NAME" "FIELD_NAME") }}
</div>  
{{my-button label="Remove" click=removeRow}}

Child component.js

--此处removeRow函数不必定义

actions: {
  // No need to define the removeRow function
}

Example Ember Twiddle --using ember.js@2.2.2 to show the rough compatibility of the above approach

Ember parent 组件中的数据更改未反映在 UI 上

Ember data changes in parent component not refelecting on UI

javascript

jquery

ember.js