Ember.js how to create a basic component

Question

I have three ember elements in my application. they all have a function acceptDeclinethat performs almost the same thing, and also has a property name isContentHiddento hide and display the content. I think its a duplicate of the code. My goal is to create a basic component. How to do it in ember.js. I read this article: http://spin.atomicobject.com/2014/03/16/subclass-emberjs-components/ , but they don't have code. any idea how i can do this. these are my all three components:

App.PendingHotelRequestsComponent= Ember.Component.extend({
    isContentHidden: false,
    actions:{
        acceptDecline: function(isStatusAccept){
            this.sendAction('accept', 'hotelrequest', {
                id: this.get('hotelRequest.pk'),
                validated_timestamp: isStatusAccept ? moment.utc().format("YYYY-MM-DD H-m-ss") : '2013-01-01 00:00:00'
            });
            this.set('isContentHidden', true);
        }
    }
});
App.PendingAcceptedOffersComponent= Ember.Component.extend({
    isContentHidden: false,
    actions:{
        accept: function(){
            this.sendAction('accept', 'inquiry', {
                id: this.get('inquiry.id'),
                validated_timestamp: moment.utc().format("YYYY-MM-DD H-m-ss")
            });
            this.set('isContentHidden', true);
        }
    }
});

Is there a way to create a basic component that will have these features

Answer 1

, , .

Mixin

App.FooMixin = Em.Mixin.create({
   isContentHidden: false
});

App.PendingHotelRequestsComponent= Ember.Component.extend(App.FooMixin, {
    actions:{
        acceptDecline: function(isStatusAccept){
            this.sendAction('accept', 'hotelrequest', {
                id: this.get('hotelRequest.pk'),
                validated_timestamp: isStatusAccept ? moment.utc().format("YYYY-MM-DD H-m-ss") : '2013-01-01 00:00:00'
            });
            this.set('isContentHidden', true);
        }
    }
});

• mixins, create .

App.BaseComponent = Em.Component.extend({
   isContentHidden: false
});

App.PendingAcceptedOffersComponent= App.BaseComponent.extend({
    actions:{
        accept: function(){
            this.sendAction('accept', 'inquiry', {
                id: this.get('inquiry.id'),
                validated_timestamp: moment.utc().format("YYYY-MM-DD H-m-ss")
            });
            this.set('isContentHidden', true);
        }
    }
});