Subclassing components help

@accelerate wrote:

Hi,

I'm fairly new to EmberJS, so hopefully this is a fairly easy question to answer. I'm trying to learn how to use Components, and I'm running into an issue with subclassing them.

What I created is a base Component class, and then another class that extends that class. The base Component (MyBaseComponent) has a property ('foo') which is an object. I also have a new Component (MyNewComponent) which extends MyBaseComponent, and upon initialization, it modifies a property of 'foo'. However, I'm doing something wrong, because when I modify 'foo', it modifies it for all instances of MyNewComponent. And I don't know why that is.

Working example: http://emberjs.jsbin.com/bumuma/edit?html,js,output

Here's how I have my Components set up:

App.MyBaseComponent = Ember.Component.extend({
    foo: {
        bar: 'base',
        anotherProperty: 'wacka'
    }
});

App.MyNewComponent = App.MyBaseComponent.extend({
    init: function() {
        this._super();
        var title = this.get('title');
        this.set('foo.bar', title);
    }
});

The template:

<script type="text/x-handlebars" id="components/my-new">
    foo.bar (App.MyNewComponent) is: {{foo.bar}}<br/>
</script>

And how I'm calling my component:

{{my-new title="instance1"}}
{{my-new title="instance2"}}

Again, I'm new to EmberJS, and my understanding is quite limited, so any help would be much appreciated!

Posts: 2

Participants: 2

Read full topic