JQ.Widget を次のようにして、見栄えがよくないことを警告する場合があります。
ここで、JQ.UiBase は JQ.Widget と同じものです。
JQ.UiBase = Ember.Mixin.create({
uiWidgets: {},
uiAttributes: {},
// ----------------------------------------------------------------------------
// setup and teardown
didInsertElement: function(){
this._super();
this._createUiWidgets();
},
willDestroyElement: function(){
this._super();
// implement tear down
},
// ----------------------------------------------------------------------------
// @Private
// @Function: for each $.ui specified in the view, create a $.ui widget
// add ui widgets to uiWidgets hash, ui widget setting to uiAttributes hash
_createUiWidgets: function(){
var widgetTypes = this._gatherWidgetTypes();
uiWidgets = this.get('uiWidgets'),
uiAttributes = this.get('uiAttributes'),
thisView = this;
widgetTypes.forEach( function( widget ){
var options = thisView.get( widget + 'Options' ) || {},
handlers = thisView._registerEventHandlers( widget ),
attributes = $.extend( options, handlers ),
uiWidget = $.ui[widget]( attributes, thisView.$() );
uiWidgets[widget] = uiWidget;
uiAttributes[widget] = attributes;
});
},
// @Function: collects named $.ui events from Widget mixin
// for each event, if there is an associated callback, wrap it in a function and call the view's context
// @Return: a hash map $.ui event to callback function defined in view
_registerEventHandlers: function( widget_name ){
var widgetName = widget_name + 'Events',
events = this.get( widgetName ) || [],
thisView = this,
eventHandlers = {};
if ( events.length === 0 ) return;
// note the iterator is not scoped to the view
events.forEach( function( event ){
var callBack = thisView.get( event );
if ( callBack ){
eventHandlers[ event ] = function ( event, ui ){ callBack.call( thisView, event, ui ); };
};
});
return eventHandlers;
},
// TODO --> find alternate implementation that does not break if structure of ui mixins or namespace change
_gatherWidgetTypes: function() {
var nameSpace = 'JQ',
widgetTypes = [];
Ember.Mixin.mixins(this).forEach( function( mixin ){
// find widget with correct namespace
if ( mixin.toString().substring(0,2) === nameSpace ){
// console.log( 'gather: ', mixin, ' --> ', mixin.mixins[1] )
// access widget mixin and check widget mixin have properties
if ( mixin.mixins && mixin.mixins[1] && mixin.mixins[1].properties ){
if ( mixin.mixins[1].properties.widgetType ) widgetTypes.push( mixin.mixins[1].properties.widgetType)
}
}
});
return widgetTypes;
},
});
そして、サイズ変更可能な mixin は次のようになります。
JQ.Resizable = Ember.Mixin.create( JQ.UiBase, {
widgetType: 'resizable',
resizableOptions: { 'aspectRatio': 1/1 },
resizableEvents: [ 'resize' ],
resize: function( event, ui ){
// do stuff
},
});
ここで最も重要な機能は、_gatherWidgetTypes
すべての JQ 名前空間 mixin を ember オブジェクトに収集する です。私の意見では、これはちょっとしたハックであり、作成後に JQ.UiBase を使用せず、ロジックを混合してウィジェットを作成し、イベント ハンドラーとオプションを 1 つの mixin に指定することを好みました。私だけ。