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