3

質問の回答によると、Ember.js ドラッグ アンド ドロップ可能なjqueryUI / ネイティブ ドラッグ アンド ドロップ ミックスイン。

JQUERY UI drag, drop, resizeにミックスインを実装しましたEmberJS。しかし、私の問題は、同じビューでドラッグとサイズ変更を行うことです。さまざまな方法で実装しようとしました。この jsfiddle http://jsfiddle.net/codejack/TGwxf/1/で確認できます。ビューは、最後に呼び出された mixin の UI 動作のみを取得します。

同じビューのドラッグ、ドロップ、サイズ変更で複数の動作を取得する方法はありますか?

編集uievents,uiOptions,uiType理由は、2番目のミックスインが変数をオーバーライドすることであることがわかりました。しかし、それを回避する方法はまだわかりません...私が見ることができる唯一の方法は、独自のイベントで独自のウィジェットを作成することです...それを解決する方法はありますか?

4

2 に答える 2

2

@ user1128571 は問題を部分的に解決する解決策を提供しましたが、問題を修正した方法を次に示します。問題を解決するため、インタラクションにさまざまなミックスインを追加しました。

https://github.com/thecodejack/jquery-ui-ember/blob/master/js/app.js#L104

モジュールのgithubページをチェックして、それがどのように機能するかを正確に確認してください

于 2013-01-09T11:37:47.640 に答える
1

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 に指定することを好みました。私だけ。

于 2013-01-07T18:06:00.330 に答える