Question

对于我的控制器，我有一个项目数组，我想显示一个列表，并有一个删除项目的操作。

从类似的问题item-specific actions in ember.js collection views中获取了大部分代码。大多数工作，地址显示工作和项呈现，但操作似乎没有正确的上下文，因此不执行删除操作。

控制器：

App.EditAddressesController = Em.ArrayController.extend({
    temporaryUser: {
        firstName: 'Ben', 
        lastName: 'MacGowan', 
        addresses: [{
            number: '24', 
            city: 'London'
            etc...
        }, {
            number: '23', 
            city: 'London'
            etc...
        }]
    }
});

temporaryUser是一个EmberObject（基于用户模型），地址数组中的每个项目都是另一个EmberObject（基于地址模型） - 这只是为了显示代码而被简化。

家长观点：

{{#each address in temporaryUser.addresses}}
    {{#view App.AddressView addressBinding="this"}}
        {{{address.display}}}
        <a {{action deleteAddress target="view"}} class="delete">Delete</a>
    {{/view}}
{{/each}}

App.AddressView：

App.AddressView = Ember.View.extend({
    tagName: 'li', 
    address: null, 
    deleteAddress: function() {
        var address = this.get('address'), 
        controller = this.get('controller'), 
        currentAddresses = controller.get('temporaryUser.addresses');
        if(currentAddresses.length > 1) {
            $.each(currentAddresses, function(i) {
                if(currentAddresses[i] == address) {
                    currentAddresses.splice(i, 1);
                }
             });
        }
        else {
            //Throw error saying user must have at least 1 address
        }
    }
});

Answer 1

发现这是我的每个人的问题：

{{#each address in temporaryUser.addresses}}

应该是：

{{#each temporaryUser.addresses}}

我的AddressView应该使用removeObject（就像原始代码示例一样）

App.AddressView = Ember.View.extend({
    tagName: 'li', 
    address: null, 
    deleteAddress: function() {
        var address = this.get('address'), 
        controller = this.get('controller'), 
        currentAddresses = controller.get('temporaryUser.addresses');
        if(currentAddresses.length > 1) {
            currentAddresses.removeObject(address);
        }
        else {
            //Throw error saying user must have at least 1 address
        }
    }
});

Answer 2

我认为如果以这种方式处理，您的代码可能会变得更具可读性：

1- 修改你的动作助手以将地址作为上下文传递。我修改了你的把手，以反映我接近这样的东西并且对我有用的方式。我认为这是做这种事情的“Ember方式”，因为模板中的属性总是查找相应视图的上下文属性：

{{#each address in temporaryUser.addresses}}
    {{#view App.AddressView contextBinding="address"}}
        {{{display}}}
        <!-- this now refers to the context of your view which should be the address -->
        <a {{action deleteAddress target="view" this}} class="delete">Delete</a>
    {{/view}}
{{/each}}

2 - 修改视图中的处理程序以接受地址作为参数：

App.AddressView = Ember.View.extend({
    tagName: 'li', 
    address: null, 
    deleteAddress: function(address) {
        var controller = this.get('controller'), 
        currentAddresses = controller.get('temporaryUser.addresses');
        if(currentAddresses.length > 1) {
            currentAddresses.removeObject(address);
        }
        else {
            //Throw error saying user must have at least 1 address
        }
    }
});

项目特定的行动

2 个答案: