Component attribute and a computed property in it with the same name: possible?

Design
1

Hello,

Beginner, I write this component:

export default Ember.Component.extend({
    items : Ember.computed('items.[]', function(){
        return this.getAttr('items').map(function(item) {
            item.hide = true;
            return Ember.Object.create(item);
        });
    }),

    ...
});

In my component’s template:

{{#each items as |item|}}
    <span class={{if item.hide "hide"}}>{{item.name}}</span>
{{/each}}

And in my controller’s template:

{{my-component items=controllerItems}}

But, when a render my-component, ‘items’ do not have a ‘hide’ property (the computed property ‘items’ is not called)… If i rename my computed property to ‘getItems’:

export default Ember.Component.extend({
    getItems : Ember.computed('items.[]', function(){
       ...
    }),

    ...
});

and use it in my component’s template like this:

{{#each getItems as |item|}}
    <span class={{if item.hide "hide"}}>{{item.name}}</span>
{{/each}}

All work…

Why can i not have a computed property with the same name as my component’s attribute ? thanks,

2

What you call component’s attribute is essentially a property. When you render you component {{my-component items=controllerItems}} it defines (if not defined yet) ‘items’ property and binds to it a controllerItems property

3

Thanks for your response.

So, if ‘items’ property already exists, its setter (ie. items : Ember.computed('items.[]',…) is not called !?