Question

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

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

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

模板呈现为

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

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

因此定义了删除操作：

    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调试器我可以确认数组是否正确并且正在移除正确的项目。后续调用也表明数组内部看起来应该如此。

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

Answer 1

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

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

例如：

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

希望这会有所帮助。感谢

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

1 个答案: