0

针对我的控制器，我有一个包含一系列项目的项目，我想显示一个列表并有一个删除项目的操作。

已从ember.js 集合视图中的类似问题项特定操作中获取大部分代码。大多数工作，地址显示工作和项目渲染，但是该操作似乎没有正确的上下文，因此不执行删除操作。

控制器：

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

temporaryUser 是一个 EmberObject（基于 User 模型），address 数组中的每个项目都是另一个 EmberObject（基于 Address 模型）——这只是为了显示代码而进行了简化。

父视图：

{{#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 = 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
        }
    }
});
4

2 回答 2

0

I think your code could become more readable if you approach it that way:

1- Modify your action helper to pass the address with it as context. I modified your Handlebars a bit to reflect the way i am approaching stuff like this and works for me. I think this is the "Ember way" of doing this kind of stuff, since a the properties in a template are always a lookup against the context property of the corresponding view:

{{#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 - Modify the handler in your view to accept the address as a parameter:

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
        }
    }
});
于 2013-02-19T19:14:54.820 回答
0

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

{{#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
        }
    }
});
于 2013-02-19T12:27:13.700 回答