Question

根据问题的答案Ember.js draggable and droppable jqueryUI / native拖放mixin。

我在JQUERY UI drag, drop, resize中实施了EmberJS个mixins。但我的问题是我想要相同的视图来拖动和调整大小。我尝试以不同的方式实施。您可以签入此jsfiddle http://jsfiddle.net/codejack/TGwxf/1/该视图仅获取最后一个名为mixin的UI行为。

有没有办法在同一视图的拖放，调整大小中获得多于1个行为？

编辑我发现原因是第二个mixin会覆盖uievents,uiOptions,uiType个变量。但是仍然不知道如何避免这种情况......我能看到的唯一方法就是用自己的事件编写自己的小部件......任何解决方法都可以解决这个问题吗？

Answer 1

虽然@ user1128571提供了部分解决问题的解决方案，但这是我如何纠正问题。我为交互添加了不同的mixin，因为这将解决问题。

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

检查模块的github pages以了解其工作原理

Answer 2

您可能希望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，它收集了ember对象中所有JQ命名空间的mixin。在我看来，它有点像黑客，我最终没有使用JQ.UiBase后，有利于混合逻辑来创建小部件，并将事件处理程序和选项指定到一个mixin，最终看起来更干净，但那是只是我。

单个EmberView做resizable（）和draggable（）

2 个答案: