ember.js如何创建基本组件

我的应用程序中有三个余烬组件。它们都有

acceptDecept

函数，该函数的作用几乎相同，并且还有一个属性名

isContentHidden

，用于隐藏和显示内容。我想它的代码是重复的。我的目标是创建一个基本组件。如何在ember.js中实现它。我读了这篇文章：但是他们没有任何代码示例。你知道我该怎么做吗。这是我的全部三个组成部分：

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);
        }
    }
});

---

有什么方法可以创建一个具有这些功能的基本组件吗？您可以使用mixin，也可以从基本组件扩展来实现简单的可重用性

混合

• 关于mixin的简要说明，在定义mixin时，您将使用

  create

  而不是extend

基本组件

---

使用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);
        }
    }
});

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);
        }
    }
});