从数组中删除项目不会刷新模板答案

【问题标题】：Removing item from array doesn't refresh template从数组中删除项目不会刷新模板
【发布时间】：2015-07-08 23:19:35
【问题描述】：

使用 Ember，我的控制器中有一个如下所示的对象：

ItemDetails: {
    Retrieved: '2016-07-09',
    User: 'someuser',
    Items: [
        {
            Name: 'Item',
            Price: 'value'
        },
        // snip
    ]
}

这是在控制器初始化中使用this.set('ItemDetails', jsonObject) 设置的。

模板呈现为

{{#each ItemDetails.Items as |Item|}}
    {{Item.Name}}
    {{Item.Price}}

    <input type="button" {{action "Remove" Item.Name }} value="Remove" class="btn btn-primary" />
{{/each}}

Remove 的动作是这样定义的：

    Remove: function(itemName) {
        var details = this.get('ItemDetails');
        var index = -1;
        for(var i = 0; i < details.Facets.length; i++) {
            if(details.Items[i].Name == itemName) {
                index = i;
                break;
            }
        }

        if(index > -1) {
            details.Items.splice(index, 1)
            this.set('Search', details);
        }
    }

现在使用 Chrome 调试器，我可以确认数组是正确的，并且正在删除正确的项目。随后的调用也会在内部显示数组的外观。

但是，模板并未反映此更改，即项目仍与其删除按钮一起显示。模板没有更新，我做错了什么？

【问题讨论】：

标签： ember.js

【解决方案1】：

应该使用某些公共方法来修改数组，以便可以观察到更改。链接在这里： http://emberjs.com/api/classes/Ember.MutableArray.html

在你的情况下，看起来逻辑是正确的。但是，您应该使用 .removeAt(index)，而不是使用 .splice()。或者，还有其他更简单的方法来解决它，例如使用 .removeObject()。

例如：

http://emberjs.jsbin.com/zezera/edit?html,css,js,output

希望这会有所帮助。谢谢

【讨论】：