ember.js如何创建基本组件

Question

我的应用中有三个ember组件。所有这些函数都具有acceptDecline函数，它具有几乎相同的功能，并且还具有用于隐藏和显示内容的属性名称isContentHidden。我认为它的重复代码。我的目标是创建一个基本组件。我怎么在ember.js中做到这一点。我读过这篇文章：http://spin.atomicobject.com/2014/03/16/subclass-emberjs-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);
        }
    }
});

我有什么方法可以创建具有这些功能的基础组件

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