Javascript 未在UI上重新选择父组件中的成员数据更改

我有一个父组件，它有一个手风琴面板（具有多行/动态行数）

对应的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);
            }
        }
    },
}   

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

儿童hbs如下所示

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);
            }
        }
    },
}   

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

{{my field field=（来自“section_NAME”“field_NAME”节的字段）}
{{my button label=“Remove”action=“removeow”}

现在，单击“删除”按钮时，我希望删除相应的行。虽然我确实在父对象中获得了操作（从子对象传递）， 即使在执行该行之后

this.get（'section'）.myRows.removeObject（row.name）

UI不会得到更新（即父组件中的数据更改不会反映在子组件中）

---

我是否需要编写额外的代码/逻辑来反映UI上的更改？

您的思路是正确的。您应该能够使用闭包操作来帮助简化连接父组件和子组件操作。请在下面的链接中查看下面的代码和一个非常基本的示例Ember Twiddle。此外，您可能已经看到了这一点，但为了以防万一，这里有一个指向Ember.js指南的链接，该指南提供了组件操作的解释

父组件.hbs

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

父组件.js

--在这里，只需传递行对象本身即可删除行。

。removedObject（行）

子组件.js

--此处不必定义

removeow

功能

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

---

尝试

this.get（'section.myRows'）.removeObject（row.name）

，如果您希望触发observer和computed属性，则需要使用

get

方法。感谢您的精彩回答…只有一个问题…在引用hbs中的子组件（即在本例中为accordion）时，是否也必须传递操作的参数名称在本例中，传递给动作的

accordion

对象只需传递给父组件.hbs中的子对象。如果这个答案不符合你的问题，请告诉我。

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

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